vue中elementUI表單循環(huán)驗(yàn)證方式
vue中elementUI表單循環(huán)驗(yàn)證
進(jìn)行驗(yàn)證的步驟
1、表單el-form 添加 :model="form" ref="form" :rules="rules",注意是 :model="form"不是v-model,而后每個el-form-item綁定prop
2、不循環(huán)的示例在官網(wǎng)可看
3、循環(huán)表單的驗(yàn)證:
- 3-1、el-form-item 綁定 :prop="`addList[${index}][orderNum]`" :rules="rules.orderNum"
注意不循環(huán)的表單每個el-form-item 不需要單獨(dú)加:rules="rules.orderNum"
然后prop的名字要與data中的rules數(shù)組對象的名稱相同即可
- 3-2、js判斷時,此處的orderNum也就是data中的rules中的名稱
`this.$refs.form.validateField('orderNum', (valid) => { //valid返回的是規(guī)則集中寫的錯誤提示信息,如果滿足條件,返回的就是空 if (valid) { return this.$refs["form"].clearValidate('orderNum'); } });`
<el-form class="demo-form" :model="form" ref="form" :rules="rules" label-width="100px"> <el-col :span="12"> <el-form-item label="名稱:" prop="name"> <el-input clearable v-model="form.name" placeholder="請輸入考評名稱"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="選擇:" prop="indexId"> <el-select clearable v-model="form.indexId" placeholder="請選擇指標(biāo)" style="width:100%;" @change="removeHintChange(form.indexId,'indexId')"> <el-option v-for="item in targetOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </el-col> <el-col class="wrap"> <div class="step" v-for="(item, index) in form.addList" :key="index"> <div class="stepName"> 步驟{{index+1}}: </div> <el-form-item label="考試考試考試考試:" class="evaluationPerson" :prop="`addList[${index}][personNameId]`" :rules="rules.personNameId"> <el-select clearable v-model="item.personNameId" placeholder="請選擇人員" @change="removeHintChange(item.personNameId,`addList[${index}][personNameId]`)"> <el-option v-for="item in personOptions" :key="item.value" :label="item.label" :value="{value:item.value,label:item.label}"> </el-option> </el-select> </el-form-item> <el-form-item label="順序:" class="order" :prop="`addList[${index}][orderNum]`" :rules="rules.orderNum"> <el-input clearable v-model="item.orderNum" @input="changeMemberId($event,index,0)"></el-input> </el-form-item> <el-form-item label="順1:" class="weight" :prop="`addList[${index}][ratio]`" :rules="rules.ratio"> <el-input clearable v-model="item.ratio" @input="changeMemberId($event,index,1)"></el-input> <div class="percent">%</div> </el-form-item> <el-form-item label="備注:" class="remarks" :prop="`addList[${index}][remark]`" :rules="rules.remark"> <el-input clearable type="textarea" v-model="item.remark" placeholder="部門負(fù)責(zé)人"></el-input> <div class="iconPic" @click="deleteInformation(index)"><i class="el-icon-delete-solid"></i></div> </el-form-item> </div> </el-col> <el-col class="addInfor"> <el-button type="primary" plain size="mini" @click="addInformation"> <i class="el-icon-plus"></i>添加 </el-button> </el-col> </el-form>
data() { return { dialogShow1: true, // 指標(biāo)選擇 indexId: "", targetOptions: [{ label: "11", value: 1 }], // 考評人員 personNameId: "", personOptions: [{ label: "22", value: 1 }], form: { indexId: "", // 表單字段列表 addList: [{ personNameId: "", orderNum: "", ratio: "", remark: "" }], }, // 校驗(yàn)規(guī)則 rules: { name: [{ required: true, message: "請輸入名稱", trigger: "blur" }], indexId: [ { required: true, message: "請選擇", trigger: "blur" }, ], personNameId: [ { required: true, message: "請選擇(人員)", trigger: "blur" }, ], orderNum: [{ required: true, message: "請輸入順序", trigger: "blur" }], ratio: [{ required: true, message: "請輸入權(quán)重", trigger: "blur" }], remark: [{ required: true, message: "請輸入備注", trigger: "blur" }], }, }; },
// 限制有的輸入框只能輸入數(shù)字 changeMemberId(val, index, num) { if (num === 0) { this.form.addList[index].orderNum = val.replace(/[^\d]/g, ""); } else if (num === 1) { this.form.addList[index].ratio = val.replace(/[^\d]/g, ""); } }, // 強(qiáng)制去掉驗(yàn)證 removeHintChange(value, name) { if (value != null || "" || []) { this.$refs.form.validateField(name, (valid) => { //valid返回的是規(guī)則集中寫的錯誤提示信息,如果滿足條件,返回的就是空 if (valid) { return this.$refs["form"].clearValidate(name); } }); } }, // 添加步驟 addInformation() { this.form.addList.push({ personNameId: "", orderNum: "", ratio: "", remark: "", }); }, // 彈窗 - 刪除信息 deleteInformation(val) { if (this.form.addList.length > 1) { this.form.addList.splice(val, 1); } else { this.$message({ message: "不可全部刪除,最少一條新增數(shù)據(jù)信息", type: "warning", }); } },
總結(jié)
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3+vite+antd如何實(shí)現(xiàn)自定義主題
這篇文章主要介紹了vue3+vite+antd如何實(shí)現(xiàn)自定義主題問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03vue2.0結(jié)合DataTable插件實(shí)現(xiàn)表格動態(tài)刷新的方法詳解
這篇文章主要介紹了vue2.0結(jié)合DataTable插件實(shí)現(xiàn)表格動態(tài)刷新的方法,結(jié)合具體項(xiàng)目實(shí)例形式分析了vue2.0結(jié)合DataTable插件實(shí)現(xiàn)表格動態(tài)刷新過程中遇到的問題與相應(yīng)的解決方法,需要的朋友可以參考下2017-03-03詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
本篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06