行内校验(简略的行内校验就不再赘述了)

动静生成表格时,须要逐行校验,因此采纳行内校验形式更为正当

法一

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: '请上传---        },         ],}