vue实现手机验证功能

效果预览：

点击后：

代码实现：

    <!-- 短信验证码 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width="400px"
      center
      @close="close"
    >
      <el-form ref="formData_passcode" :model="formData_passcode" :rules="rules1">
        <div style="margin-bottom:10px">
          接收的手机号: {{ formData.entPhone.slice(0,3) + '****' + formData.entPhone.slice(-4) }}
        </div>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item prop="code">
              <el-input v-model="formData_passcode.code" maxlength="6" placeholder="请输入验证码" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button size="mini" type="primary" :disabled="clockShow ? true : false" @click="getMessage">
                {{ clockShow ? clock + 's后重试' : '点击获取验证码' }}
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <!-- <span v-if="clockShow">{{ clock }} s内</span> -->
            </el-form-item>
          </el-col>
        </el-row>
        <div v-if="clockShow">{{ clockShow ? '验证码已发送,2分钟内有效' : '验证码已过期,请点击重新发送!' }}</div>
        <div style="text-align:right">
          <el-button size="mini" type="primary" @click="passcodeConfirm">确定</el-button>
        </div>
      </el-form>
    </el-dialog>

 

    // 获取短信验证码
    getMessage() {
      this.clockShow = true
      sendMessage(this.formData.entPhone).then(res => {
        // console.log(res)
        if (res.code === 0) {
          console.log('发送成功')
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
      this.setTime() // 开始倒计时
    },
    
    // 倒计时函数封装
    setTime() {
      if (this.clock === 0) {
        this.clock = 120
        this.clockShow = false
        return
      } else {
        this.clock--
      }
      setTimeout(() => { this.setTime() }, 1000)
    },

    // 验证通过
    passcodeConfirm() {
      if (this.formData_passcode.code) {
        this.formData_passcode.entPhone = this.formData.entPhone
        // 校验验证码输入是否正确
        getCompareCode(this.formData_passcode).then(res => {
          if (res.data) {
            this.$message({
              type: 'success',
              message: res.msg
            })
            this.submit() // 如果验证码输入正确，那么接下来要做什么操作?
            this.dialogFormVisible = false
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      } else {
        this.$message({
          type: 'error',
          message: '请输入验证码!'
        })
      }
    },

    // 事件操作
    submit() {
        
    }