表單校驗(選擇下拉框,input變化 不影響校驗)
阿新 • • 發佈:2021-07-01
選擇下拉框時 型別不同,但是可以只在當前型別中點選“立即建立”,不影響下一型別的校驗
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-form-item label="型別" prop="region"> <el-select v-model="ruleForm.region" @change="clickOption"> <el-option v-for="item in optionList" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </el-form-item> <div v-if="ruleForm.region == 1"> // 判斷 <el-form-item label="賬戶" prop="zhang"> <el-input type="text" v-model="ruleForm.zhang" ></el-input> </el-form-item ><el-form-item label="名稱" prop="ming"> <el-input type="text" v-model="ruleForm.ming"></el-input> </el-form-item> <el-form-item label="科目" prop="kemu"> <el-input type="text" v-model="ruleForm.kemu"></el-input> </el-form-item> </div> <div v-if="ruleForm.region == 2"> // 判斷 <el-form-item label="編碼" prop="bian"> <el-input type="text" v-model="ruleForm.bian" ></el-input> </el-form-item ><el-form-item label="稱號" prop="yin"> <el-input type="text" v-model="ruleForm.yin"></el-input> </el-form-item> <el-form-item label="掛掉" prop="dui"> <el-input type="text" v-model="ruleForm.dui"></el-input> </el-form-item> </div> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')" >立即建立</el-button > <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form>
data() { return { optionList: [ { value: 1, label: "型別一" }, { value: 2, label: "型別二" }, ], ruleForm: { region: 1, // 預設選中第一個 zhang: "", ming: "", kemu: "", bian: "", yin: "", dui: "", }, rules: { // 校驗 zhang: [{ required: true, message: "請輸入zhang", trigger: "blur" }], ming: [{ required: true, message: "請選擇ming", trigger: "change" }], kemu: [{ required: true, message: "請選擇kemu", trigger: "change" }], bian: [{ required: true, message: "請選擇bian", trigger: "change" }], yin: [{ required: true, message: "請選擇yin", trigger: "change" }], dui: [{ required: true, message: "請選擇dui", trigger: "change" }], }, }; }, methods: { clickOption(val) { // 下拉框選擇 if (val == "1") { this.$refs.ruleForm.resetFields(); // 清空 this.ruleForm.region = 1; // 賦值 } else if (val == "2") { this.$refs.ruleForm.resetFields(); this.ruleForm.region = 2; } }, submitForm(formName) { // 立即建立 this.$refs[formName].validate((valid) => { if (valid) { alert("submit!"); } else { console.log("error submit!!"); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); }, },