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