vue实现短信验证码登录

vue实现验证码登录demo

不废话直接上demo

html

 
   
     
   
   
     
       获取验证码
       {{second}}秒后获取
     
   
   
     登录
   
 
  

data

  data() {
    const validate_mobile = (rule, value, callback) => {
        let reg = /^[1]([3-9])[0-9]{9}$/;
        if (!value) {
          callback(\"请输入手机号\");
        } else if (!reg.test(value)) {
          callback(\"请输入正确的手机号\");
        } else {
          callback();
        }
      };
    return {
      rules: {
        mobile: [{ required: true, validator: validate_mobile, trigger: \"blur\" }],
        code: [{ required: true, message: \"请输入验证码\", trigger: \"blur\" }]
      },
      ruleForm:{
        mobile:\'\',
        code:\'\'
      },
      sending: true,    //是否发送验证码
      disabled: false,  //是否禁发验证码
      second:59,        //倒计时间
    };
  },

methods

  //methods

  //倒计时
   timeDown() {
      let result = setInterval(()=>{
      --this.second;
      if(this.second < 0) {
        clearInterval(result);
        this.sending  = true;
        this.disabled = false;
        this.second = 59;
        }   
      }, 1000);
    },
    
    //获取验证码
    getCode(){
      if(!this.sending){
        return;
      }
      if(this.ruleForm.mobile == \'\'){
        this.$message.error(\'请输入手机号\')
      }else{
      //api接口封装请求
        this.$http.user.getCode({
          mobile:this.ruleForm.mobile
        }).then(res=>{
          this.sending  = false;
          this.disabled = true;
          this.timeDown();
        })
      }
    },
  //提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(\'提交\')
        }
      });
    },

效果

点击获取，按钮禁用并开始倒计时

笔记：
api 封装后面会分享，目前是想到哪就写哪
后续还会分享微信钉钉字节小程序，uniapp, react, 常用操作，和踩过的坑