例子:如下图所示,在注册功能中,点击“获取验证码”按钮的时候,对手机号输入和随机验证码输入进行正确性校验
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) { // 处理逻辑 } })