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

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'
          })
      }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值