行内校验(简略的行内校验就不再赘述了)
动静生成表格时,须要逐行校验,因此采纳行内校验形式更为正当
法一
el-form-item下可嵌套el-table,但双向绑定只能通过插槽取得,通过v-model绑定,这里有个须要留神的是prop必须加上,轻易给一个值就能够触发,不加的话有时会不触发。
<el-table-column prop="name" label="xxx align="center"> <template slot-scope="scope"> <el-form-item prop="x" :rules="[ { validator: function(rule, value, callback) { const { name } = form.sentenceList[scope.$index] if (name) { return callback() } callback(throwError()) }, message: '请输出xxx, trigger: 'blur' }, ]" > <el-input v-model="scope.row.name" placeholder="xxx></el-input> </el-form-item> </template> </el-table-column>
法二
<div class="form-item-group" v-for="(item,index) in addDataForm.disActReviewTransfers" :key="index" > <el-form-item label="xxx" :prop="'disActReviewTransfers.' + index + '.reflectedUser'" :rules="[{ required: true, message: '请填写xxx, trigger: 'blur' }]" > <el-input v-model="item.reflectedUser" maxlength="32" :ref="`reflectedUser-${index}`" ></el-input> </el-form-item></div>
其中:prop="'disActReviewTransfers.' + index + '.reflectedUser'"必须依照这样的格局,disActReviewTransfers为form中对应的数组字段,index为循环索引,reflectedUser为数组中一项(对象)的字段。
法三:
<el-form-item label="身份证号:" :prop="'disActReviewTransfers.' + index + '.idCard'" :rules="[{ required: true, message: '请填写身份证号', validator:checkIdCard}]" >
像这种行内自定义校验函数应该写在methods中进行校验
checkIdCard(rule, value, cb) { if (!value) { cb(new Error('请填写身份证号')) } else { const regIdCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ if (regIdCard.test(value)) { return cb() } cb(new Error('请填写非法的身份证号')) } cb() }
自定义校验
data() { var reviewReportValid = (rule, value, cb) => { this.addDataForm.disActReviewTransfers.forEach((i, index) => { if (i.reviewReport === '') { cb(rule) } }) cb() } return{}}
须要留神的是 此处的reviewReportValid须要写在如上地位,不能写在methods中。
addDataFormRules:{ reviewReport: [ { required: true, validator: reviewReportValid, trigger: 'blur', message: '请上传--- }, ],}