表单校验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
// 校验成功后逻辑
})
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfhkjhg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01