手机验证码获取

手机验证码获取_第1张图片

<el-form-item label="短信验证码" required>
                    <el-input v-model="ruleForm.verificationcode" placeholder="请添加验证码">
                      <el-button v-if="isdisabled" slot="suffix" style="color:#409EFF;"  type="text" @click="getCodeBtn" >获取验证码el-button>
                      <el-button v-else slot="suffix" style="color:#409EFF;"  type="text"  disabled>{{ counts }}s后重新发送el-button>
                    el-input>
                  el-form-item>
 data () {
    return {
        isdisabled:true,
        counts: "",
        timer:null,
        ruleForm: {
          phoneNumber: '',
          verificationcode: '',
        },
     }
  },
  getCodeBtn(){
      this.ruleForm.VerificationCode = ''
      if(this.ruleForm.phoneNumber == ""){
        this.$message.warning('请添加店长手机号');
        return;
      }
      if (!/^1[3456789]\d{9}$/.test(this.ruleForm.phoneNumber)) {
        this.$message.warning("请输入正确的手机格式");
        return;
      }
      const TIME_COUNT = 60;
			if (!this.timer) {
				this.counts = TIME_COUNT;
				this.isdisabled = false;
				this.timer = setInterval(() => {
					if (this.counts > 0 && this.counts <= TIME_COUNT) {
						this.counts--;
						if(this.counts == 0){
              this.isdisabled = true;
						}
					} else {
						clearInterval(this.timer);
						this.timer = null;
					}
				}, 1000);
			}
    },

你可能感兴趣的:(前端网页小项目,vue.js)