表单校验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"&gt;
		<a-input v-model="form.mobile" size="large" placeholder="请输入手机号" :maxLength="50" /&gt;
	</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中。 在回调函数中对添加判断逻辑，当数组长度与表单项相等，并且数组的每一项值都为空（‘’）时，代表校验通过

// 存放每次校验结果valid
let 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 => new Promise((resolve, reject) => {
  // 将每次校验结果返回
  this.$refs.Form.validateField(item, err => resolve(err))
}))).then(res => {
  // then 的第一个参数是所有promise都成功的调用，返回结果是一个数组，数组的每一项为函数promise 的返回结果
  if (res.filter(item => item).length) return

  // 校验成功后逻辑

})

代码007普通

打赏 收藏 海报 链接