input输入框，手机号码完整验证规则；点击获取验证码变成60s倒计时

最新推荐文章于 2024-07-31 09:42:21 发布

qq_46302247

最新推荐文章于 2024-07-31 09:42:21 发布

阅读量1.9k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_46302247/article/details/121990739

版权

input输入框，手机号码完整验证规则

//prop="loginId" 和 v-model="ruleForms.loginId" ，字段名要一致
<el-form-item prop="loginId">
	<el-input 
	v-model="ruleForms.loginId"
	oninput="if(value.length>11)value=value.slice(0,11)"
	placeholder="手机号"
	class="telphone"
	clearable></el-input>
 </el-form-item>


 data () {		
    var checkPhone = (rule, value, callback) => { // 手机号验证
        if (!value) {
         	return callback(new Error('手机号不能为空'));
        } else {
	        const reg = /^1[3456789]\d{9}$/
	        
	        if (reg.test(value)) {
	         	callback();
	        } else {
	         	return callback(new Error('请输入正确的手机号'));
	        }
        }
        
     };
    return {
	    rules: {
	        loginId:[
	             {required: true, message: '请输入正确的手机号', trigger: 'blur'},
	             {validator: checkPhone, trigger: 'blur'}
		    ],
	      },
	}
}

点击获取验证码变成60s倒计时

data() {
	return {
		showGetCheckCode: true,
		count: '',
      	timer: null,
	}
}


<el-button plain
	@click="getCode" v-show="showGetCheckCode" :disabled="checkCode">获取验证码</el-button>
<span v-show="!showGetCheckCode" >{{count}} s</span>

getCode(){
      
      var rex = /^1[34578]\d{9}$/;// /^1[3-9]+\d{9}$/;
      if (rex.test(this.ruleForms.loginId)) {
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.showGetCheckCode = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.showGetCheckCode = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
        verifyCode({phone:this.ruleForms.loginId}).then(res=>{
          if(res.code=='0000'){
            this.$message({
              message:'短信发送成功',
              type:'success'
            })
          }
        })
      } else {
        this.$message({
            message:'请输入正确的手机号',
            type:'error'
          })
      }