vue中的几种校验方式

行内校验（简单的行内校验就不再赘述了）

动态生成表格时，需要逐行校验，因而采用行内校验方式更为合理

法一

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