Vue表单校验validate和validateField的使用及区别详解
作者：天边月_
validateField 和 validate 都可以用于表单验证,但是它们的作用有所不同,下面这篇文章主要给大家介绍了关于Vue表单校验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中。 在回调函数中对添加判断逻辑，当数组长度与表单项相等，并且数组的每一项值都为空（‘’）时，代表校验通过
// 存放每次校验结果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
// 校验成功后逻辑
})附：element 中表单 validateField方法部分校验遇到的坑
Step1() {
this.$refs.dataForm.validateField(this.field, (valid) => {
if (!valid) {
// 校验通过进行的操作
}
})
},
// 多个字段需要校验时候 上面写法一个字段校验通过即可进入if,并没有校验全部字段，改下面写法：
Step1() {
const validateList = [] // 定义空数组
this.$refs.dataForm.validateField(this.field, (valid) => {
// this.field 为要校验的部分rules数组
validateList.push(valid)
})
if (validateList.every((item) => item === '')) {
// 判断全部为空时 进行的操作
}
},总结
到此这篇关于Vue表单校验validate和validateField的使用及区别的文章就介绍到这了,更多相关表单校验validate和validateField使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！