例子:如下图所示,在注册功能中,点击“获取验证码”按钮的时候,对手机号输入和随机验证码输入进行正确性校验
vue对部分字段进行验证,
1,对一个字段phone验证
this.$refs[formName].validateField('phone', (phoneValid) => {
if (!phoneValid) {
// 处理逻辑
}
})2,对一个字段phone,password同时验证
this.$refs[formName].validateField('phone', (phoneValid) => {
if (!phoneValid) {
this.$refs[formName].validateField('password', (passwordValid) => {
if (!passwordValid) {
let phone = this.form.phone
request.httpPost('/api/verification_code', { 'phone': phone }, success => {
this.$message({
message: '验证码发送成功',
type: 'success',
offset: 80
})
// 当验证码发送成功,开始60秒倒计时
const time = 60
if (!this.form.timer) {
this.form.showloginCode = false
this.form.count = time
this.form.timer = setInterval(() => {
if (this.form.count > 0 && this.form.count <= time) {
this.form.count -= 1
} else {
this.form.showloginCode = true
clearInterval(this.form.timer)
this.form.timer = null
this.form.isRetry = true
}
}, 1000)
}
}, error => {
this.$message({
message: '验证码发送失败!',
type: 'error',
offset: 80
})
console.log(error)
})
}
})
}
})操作做法如下,会执行两次
this.$refs[formName].validateField(['phone','password'], (valid) => {
if (!valid) {
// 处理逻辑
}
})