使用validateField

<el-form:model="params":rules="rules":scroll-to-error="true"ref="refrom"v-else><el-form-item label="用户姓名" prop="name"><el-input placeholder="请输入用户姓名" v-model="params.name"></el-input></el-form-item><el-form-item label="证件类型" prop="certificatesType"><el-selectstyle="width: 100%"placeholder="请选择证件类型"v-model="params.certificatesType"><el-optionv-for="(item,index) in arrType":key="index":label="item.name":value="item.value"/></el-select></el-form-item><el-form-item label="证件号码" prop="certificatesNo" ><el-input placeholder="请输入证件号码" v-model="params.certificatesNo"></el-input></el-form-item><el-form-item label="上传证件" prop="certificatesUrl"><!-- action:upload组件向服务器提交图片路径limit:照片墙约束图片个数on-exceed:超出约束数量的钩子--><el-uploadref="upload"v-model="params.certificatesUrl"action="/api/oss/file/fileUpload?fileHost=userAuah"limit="1"list-type="picture-card":on-exceed="handleExceed":on-success="handlesuccess":on-remove = 'handleremove':on-preview="handlePictureCardPreview"><imgstyle="width: 100%; height: 100%"src="../../../assets/images!auth_example.png"alt=""/></el-upload><el-dialog v-model="dialogVisible"><img w-full alt="Preview Image" :src="params.certificatesUrl" v-if="params.certificatesUrl"/></el-dialog></el-form-item><el-form-item><el-button type="primary" size="default" @click="submit">提交</el-button><el-button type="primary" size="default" @click="reset">重写</el-button></el-form-item></el-form>1,先给form表单绑定ref //创建form表单的实例const refrom = ref()2，给表单绑定rules校验const rules = {name: [{ validator: checkName, trigger: 'change',required: true }],certificatesType: [{ validator: checkcertificatesType,required: true }],certificatesUrl: [{ validator: checkcertificatesUrl, trigger: 'change',required: true }],certificatesNo: [{ validator: checkcertificatesNo, trigger: 'change' ,required: true }]}const checkcertificatesNo = (rule: any, value: any, callback: any) =>{if(params.certificatesType == ''){refrom.value.validateField('certificatesType',(errorMessage:any)=>{console.log(errorMessage,'errorMessage')})}console.log(params.certificatesType,'params.certificatesType')}3，开始自定义校验//自定义name校验const checkName = (rule: any, value: any, callback: any) =>{const res = /^[\u4e00-\u9fa5]+$/if(res.test(value)){callback()}else{callback('请输入正确的名字')}}//自定义证件类型校验const checkcertificatesType = (rule: any, value: any, callback: any) =>{if(value == 10 || value == 20){callback()}else{callback('请选择证件类型')}console.log(value,'value')}
//自定义校验图片
//  const checkcertificatesUrl = (rule: any, value: any, callback: any) =>{
//     console.log(params.certificatesType,'params.certificatesType')
//  }//自定义校验证件号码const checkcertificatesNo = (rule: any, value: any, callback: any) =>{//关键代码 validateField ，是一个函数，第一个填写要校验的某一项，第二个是一个函数，返回true和false，会自动触发certificatesType的校验规则，只需要在里面判断逻辑即可refrom.value.validateField('certificatesType',(errorMessage:any)=>{if(errorMessage == true){if(params.certificatesType == 10){const reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/if(reg.test(value)){callback() }else{callback('请输入正确的身份证')}}else{let hkb = /^\d{9}$/;if(hkb.test(value)){callback() }else{callback('请输入正确的户口本')}}}})console.log(params.certificatesType,'params.certificatesType')}