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'
})
}