Vue A demo of front-end SMS verification

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix"< <span> User login </span> </div> <el-form> <el-form-item> <el-input V-model ="phoneNumber" placeholder="Please enter your mobile phone number.">
          <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="Please enter the verification code."></el-input>
      </el-form-item>
      <el-button type="primary" @click="onSubmit"> login < / el - button > < / el - form > < / el - card > < / template > < script >export default {
  name: "".data() {
    return {
      phoneNumber: "",
      verifyCode: "",
      disabled: false,
      btnTitle: "Obtain captcha code",
      temp:""
    };
  },
  methods: {
    onSubmit() {
      if(this.verifyCode==this.temp){
        console.log("Login successful, the verification code is:"+this.temp);
      }else{
        console.log("Login failed")}},getVerifyCode() {
      let time = 30;
      let timer = setInterval(() => {
        this.btnTitle = time + "Try again in seconds.";
        this.disabled = true;
        time--;
        if (time == 0) {
          clearInterval(timer);
          this.btnTitle = "Obtain captcha code";
          this.disabled = false; }}, 1000); this.temp=Math.floor(Math.random()*100000)+100000;letregUrl = this.JUHE_API + `/json? key=m4riqdf3&secret=kLbF9WFT&from=pingda&to=86${this.phoneNumber}&text= [jiyuan Morning Post]${this.temp}Please don't tell anyone. `; 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>
Copy the code

The login box card made by ElementUI is used to define a random six-digit digit verification code and send the random verification code to the entered mobile phone number through THE SMS API. After the input of the random number verification code, the value of the input box is compared with the saved random number. If the value is equal, the verification code is correct