2022.9.17 vue、element-ui实现登录获取手机验证码，进行手机号校验、验证码CD60秒

一、实现效果：

1、直接点击，不为空校验

2、输入手机号格式不正确时

3、获取完验证码进行读秒

二、页面html

<el-form
    class="phone-form"
    ref="form"
    :model="form"
    label-position="left"
    size="small"
    :rules="rules"
    v-if="!loggingStatus"
  >
    <el-form-item
      prop="phoneNum"
      :rules="rules.phoneNum"
      ref="phone"
    >
      <el-input
        size="small"
        placeholder="请输入手机号"
        v-model="form.phoneNum"
        class="input-with-select"
      >
        <el-select v-model="select" slot="prepend" placeholder="+86">
          <el-option label="+86" value="+86"></el-option>
          <el-option label="+40" value="+86"></el-option>
          <el-option label="+111" value="+86"></el-option>
        </el-select>
      </el-input>
    </el-form-item>
    <el-form-item
    prop="checkCode">
      <el-input
        class="check-code-box"
        size="small"
        v-model.number="form.checkCode"
        placeholder="请输入验证码"
      >
        <el-button :disabled="codeCd" size="small" slot="append" @click="handleCaptcha('form')"
          >获取验证码
          <span v-if="codeCd">({{long}})</span>
        </el-button>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button class="custom-button" @click="onSubmit('form')" type="primary"
        >登录</el-button
      >
    </el-form-item>
  </el-form>

三、vue

data () {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('手机号不能为空'))
      }
      // 使用正则表达式进行验证手机号码
      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('手机号格式不正确'))
      }
      // 自定义校验规则 需要调用callback()函数！
      callback()
    }
    return {
      // 登录状态
      loggingStatus: false,
      // 验证码是否CD
      codeCd: false,
      // CD长度
      long: 60,
      select: '',
      input: '',
      form: {
        phoneNum: null,
        checkCode: null
      },
      rules: {
        phoneNum: [
          { required: true, validator: validatePhone, trigger: 'blur' }
        ],
        checkCode: [
          { required: true, message: '验证码不能为空哦！', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取手机验证码
    handleCaptcha (form) {
      this.$refs[form].validateField('phoneNum', async (valid) => {
        if (!valid) {
          // 获取验证码
          captcha(this.form.phoneNum)
          // 开启计时
          this.codeCd = true
          const timer = setInterval(() => {
            this.long--
            if (this.long <= 0) {
              this.long = 60
              this.codeCd = false
              clearInterval(timer)
            }
          }, 1000)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }

四、总结

1、进行手机号校验关键在对单个手机号输入框进行校验，需要使用到validateField对部分表单字段进行校验，valid是校验完的提示信息，当valid为空时代表校验成功
2、读秒和设置禁用，在校验成功时设置一个60s计时器，读秒过程禁用按钮，用了element-ui的按钮组件，在读秒过程中给按钮增加disabled属性；读秒过程结束，解除按钮禁用