Vue的几种验证方式
内联验证(简单的内联验证这里不再赘述)。动态生成表时,需要逐行验证,所以使用行内验证的方式更合理——el-formel-table可以嵌套在-item下,但只能获取双向绑定通过slots,通过v-model绑定,这里需要注意一点,prop必须加,给任意值都可以触发,不加的话有时不触发。法二
其中:prop="'disActReviewTransfers.'+index+'.reflectedUser'"必须遵循这种格式,disActReviewTransfers是表单中对应的数组字段,index是循环索引,reflectedUser是数组中某一项(对象)的字段方法三:
像这样的内联自定义验证函数应该写在方法中用于验证checkIdCard(rule,value,cb){if(!value){cb(newError('请填写身份证号码'))}else{constregIdCard=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/if(regIdCard.test(value)){returncb()}cb(newError('请填写有效身份证号码'))}cb()}自定义验证数据(){varreviewReportValid=(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:'请上传---},],}