vue一个前端短信验证的demo

631
<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>用户登录</span>
    </div>
    <el-form>
      <el-form-item>
        <el-input v-model="phoneNumber" placeholder="请输入手机号">
          <el-button slot="append" @click="getVerifyCode" :disabled="disabled">{{btnTitle}}</el-button>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="verifyCode" placeholder="请输入验证码"></el-input>
      </el-form-item>
      <el-button type="primary" @click="onSubmit">登录</el-button>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      phoneNumber: "",
      verifyCode: "",
      disabled: false,
      btnTitle: "获取验证码",
      temp:""
    };
  },
  methods: {
    onSubmit() {
      if(this.verifyCode==this.temp){
        console.log("登录成功,本次验证码是:"+this.temp);
      }else{
        console.log("登录失败")
      }
    },
    getVerifyCode() {
      let time = 30;
      let timer = setInterval(() => {
        this.btnTitle = time + "秒后重试";
        this.disabled = true;
        time--;
        if (time == 0) {
          clearInterval(timer);
          this.btnTitle = "获取验证码";
          this.disabled = false;
        }
      }, 1000);   
      this.temp=Math.floor(Math.random()*100000)+100000;
      let regUrl =
        this.JUHE_API +
        `/json?key=m4riqdf3&secret=kLbF9WFT&from=pingda&to=86${this.phoneNumber}&text=【济源晨报】本次验证码是:${this.temp},请不要告诉他人哦!`;
      this.$Axios.get(regUrl).then(res => {
        console.log(res);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-input-group__append {
  .el-button {
    padding: 4px;
  }  
}
.el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover{
  background: none;
}
</style>

使用elementui制作的登录框card,定义一个随机六位数数字验证码 通过短信api给输入的手机号,发送随机验证码,保存这个随机数 验证码输入后,输入框的值和保存的随机数做比较,相等即表示验证码正确