表单校验validate和validateField的使用及区别

在ant design框架开发的项目中，使用 FormModel 实现表单功能。在对表单进行校验时，只需要通过 rules 属性传入约定的验证规则，并将 FormItem 的 prop 属性设置为需校验的字段名即可。

更多配置详见：https://1x.antdv.com/components/form-model-cn/

validate 会对整个表单进行校验，只要绑定了 prop 属性的表单项 ，都会被校验。validateField 可以只对表单中的部分字段进行校验。

代码示例：

template 表单渲染

<a-form-model ref="Form":model="form":rules="rules"><a-form-model-item prop="mobile"><a-input v-model="form.mobile" size="large" placeholder="请输入手机号":maxLength="50"/></a-form-model-item><a-form-model-item prop="verificationCode"class="other"><a-input v-model="form.verificationCode" size="large" placeholder="请输入验证码":maxLength="6"/><a-button size="large":disabled="state.smsSendBtn || !form.mobile" @click="getCode">{{ state.smsSendBtn ?'已发送('+ state.time +')':'获取验证码'}}</a-button></a-form-model-item><a-form-model-item prop="password"><a-input-password v-model="form.password" size="large" placeholder="请输入密码":maxLength="50"/></a-form-model-item><a-form-model-item prop="confirmPassword"><a-input-password v-model="form.confirmPassword" size="large" placeholder="请确认密码":maxLength="50"/></a-form-model-item></a-form-model>

表单参数校验规则

rules:{mobile:[{required:true,validator:this.mobileCheck.bind(this),trigger:['blur']}],verificationCode:[{required:true,message:'请输验证码',trigger:['blur']}],password:[{required:true,validator:this.passwordCheck.bind(this),trigger:['blur']}],confirmPassword:[{required:true,validator:this.confirmPasswordCheck.bind(this),trigger:['blur']}]}// 手机号校验mobileCheck(rule, value, callback){const reg =/^[1][3,4,5,6,7,8,9][0-9]{9}$/if(!value){callback('请输入手机号码')return}if(!reg.test(value.replace(/(^\s*)|(\s*$)/g,""))){callback('请输入正确手机号码')return}callback()}// 密码校验passwordCheck(rule, value, callback){const reg =/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/if(!value){callback('请输入密码')return}if(this.form.confirmPassword){this.$refs.Form.validateField(['confirmPassword'])}if(!reg.test(value)){callback('密码必须为8-20位，由数字和大小写字母组成')return}callback()}// 再次输入密码校验confirmPasswordCheck(rule, value, callback){let{ password }=this.form
  if(!value){callback('请再次输入密码')}if(password){if(password === value){callback()}else{callback('两次输入密码不一致，请重新输入')}}else{callback('请先输入密码')}},

参数校验

使用 validate 对整个表单进行校验，回调函数返回值valid 为true时代表校验通过，false代表校验不通过。

this.$refs.Form.validate(valid=>{if(!valid){// 校验不通过return}// 校验通过后逻辑....})

使用 validateField 对某个表单项进行校验，当回调函数返回值valid 为空（‘’）时，表示校验通过，不为空时表示校验不通过。

this.$refs.Form.validateField(['mobile'],valid=>{if(valid){// 校验不通过return}// 校验通过后逻辑....})

使用 validateField 对多个表单项进行校验

注意：表单项有几个，回调函数就会执行几次，执行顺序为数组书写顺序，每次返回对应表单项的校验结果。这样会导致校验通过后的逻辑执行多次。有两种解决方案：

1、新建数组arr，回调函数每次执行时，将结果push到arr中。 在回调函数中对添加判断逻辑，当数组长度与表单项相等，并且数组的每一项值都为空（‘’）时，代表校验通过

// 存放每次校验结果validlet validateFieldList =[]// 校验方法this.$refs.Form.validateField(['mobile','captcha'],valid=>{if(!valid){// 校验通过后，将valid追加入数组
    validateFieldList.push(valid)}// 校验数组长度与表单项相等，并且数组的每一项值都为空（‘’）if(validateFieldList.length ==2&& validateFieldList.every(item=> item ==='')){//校验通过的业务逻辑}// 校验不通过逻辑return})

2、使用Promise.all()方法，把每个表单项校验封装为promise函数，所有校验函数都返回成功后，在执行后续代码逻辑

// 需要校验的表单项let fileids =['mobile','captcha']// Promise.all 里面参数为一个数组，数组的每一项是一个返回promise 的函数调用
Promise.all(fileids.map(item=>newPromise((resolve, reject)=>{// 将每次校验结果返回this.$refs.Form.validateField(item,err=>resolve(err))}))).then(res=>{// then 的第一个参数是所有promise都成功的调用，返回结果是一个数组，数组的每一项为函数promise 的返回结果if(res.filter(item=> item).length)return// 校验成功后逻辑})