vue validateField方法对部分表单字段进行校验

作者: web 发布时间: 2022-04-12 浏览: 6762 次 编辑

例子:如下图所示,在注册功能中,点击“获取验证码”按钮的时候,对手机号输入和随机验证码输入进行正确性校验

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) {
           // 处理逻辑
        }
})