[JavaScript知识库]vue 短信验证码

<template>
  <div class="reg">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="80px"
      class="demo-ruleForm"
    >
      <h3 class="login-title">欢迎注册</h3>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model.number="ruleForm.phone"  placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="verify">
        <!-- <el-input v-model.number="ruleForm.phone"></el-input> -->
        <div class="bind_code margin_top" >
          <el-input
            class="bind_code_input code"
            v-model="ruleForm.verify"
            type="text"
            placeholder="请输入验证码"
          />
          <span class="bind_code_gain" :disabled="ruleForm.disabled" @click="bindforgetSendCode">
            {{ ruleForm.btnText }}</span>
        </div>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <label slot="label">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
        <el-input
          type="password"
          v-model="ruleForm.pass"
          autocomplete="off"
           placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          autocomplete="off"
           placeholder="请确认密码"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确认</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    var checkphone = (rule, value, callback) => {
      // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
      if (value == "") {
        callback(new Error("请输入手机号"));
      } else if (!this.isCellPhone(value)) {
        //引入methods中封装的检查手机格式的方法
        callback(new Error("请输入正确的手机号!"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: "",
        checkPass: "",
        phone: "",
        btnText: "发送验证码",
        disabled: false,
      },
      rules: {
        pass: [{ required: true, validator: validatePass, trigger: "blur" }],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
        phone: [{ required: true, validator: checkphone, trigger: "blur" }],
        verify: [
          { required: true, message: "请输入短信验证码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //检查手机号
    isCellPhone(val) {
      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
        return false;
      } else {
        return true;
      }
    },
// 发送验证码
    bindforgetSendCode() {
      console.log(121212);
      //手机号 为空的话
      this.$refs.ruleForm.validateField("phone", (errorMessage) => {
        console.log(errorMessage);
        if (!errorMessage) {
          this.$message("已发送验证码，请查收");
          this.ruleForm.disabled = true;
          this.ruleForm.btnText = "请稍候...";
          setTimeout(() => {
            this.doLoop(60);
          }, 500);
        } else {
          return false;
        }
      })
    },
    doLoop(seconds){
      console.log(seconds);
      seconds = seconds ? seconds : 60;
      this.ruleForm.btnText = seconds + "s后获取";
      // this.code = code
      let countdown = setInterval(() => {
        if (seconds > 0) {
          this.ruleForm.btnText = seconds + "s后获取";
          --seconds;
        } else {
          this.ruleForm.btnText = "获取验证码";
          this.ruleForm.disabled = false;
          clearInterval(countdown);
        }
      }, 1000);

    },
    submitForm(formName) {
      let _this = this;
    
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.reg {
  display: flex;
  background-color: rgb(150, 169, 243);
  width: 100%;
  height: 100%;
}
.demo-ruleForm {
  border: 1px solid #dcdfe6;
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}
.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #fff;
}
.bind_code_input{
  width: 70%;
}
.bind_code_gain{
  cursor: pointer;
}
</style>