点击发送验证码按钮,校验手机号
<el-form-item prop="phone">
<el-input
v-model="forgetPForm.phone"
placeholder="请输入手机号"
></el-input>
<img
class="login-icon"
src="../../assets/images/iphone.png"
alt=""
/>
</el-form-item>
<el-form-item prop="verify">
<div class="bind_code margin_top">
<el-input
class="bind_code_input code"
v-model="forgetPForm.verify"
type="text"
placeholder="请输入验证码"
/>
<el-button
@click.native.prevent="bindforgetSendCode"
class="bind_code_gain"
:disabled="disabled"
>{{ btnText }}</el-button
>
<img
class="login-icon"
src="../../assets/images/code.png"
alt=""
/>
</div>
</el-form-item>
// 手机号登录验证规则
forgetPFormRules: {
phone: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{ required: true, validator: validatePhone, trigger: "blur" },
],
verify: [
{ required: true, message: "请输入短信验证码", trigger: "blur" },
],
},
// 发送验证码的 文本 以及按钮是否可以按
type: "",
btnText: "发送验证码",
disabled: false,
// 发送验证码
bindforgetSendCode() {
//手机号 为空的话
this.$refs.forgetPFormRef.validateField("phone", (errorMessage) => {
if (!errorMessage) {
this.$message("已发送验证码,请查收");
this.disabled = true;
this.btnText = "请稍候...";
setTimeout(() => {
this.doLoop(60);
}, 500);
} else {
return false;
}
});
// 手机验证码的倒计时
doLoop: function (seconds) {
seconds = seconds ? seconds : 60;
this.btnText = seconds + "s后获取";
// this.code = code
let countdown = setInterval(() => {
if (seconds > 0) {
this.btnText = seconds + "s后获取";
--seconds;
} else {
this.btnText = "获取验证码";
this.disabled = false;
clearInterval(countdown);
}
}, 1000);
},
.bind_code {
position: relative;
.el-input__inner {
width: 328px;
height: 44px;
background: #f7f7f7;
border-radius: 4px;
border: 1px solid #e4e4e4;
outline: none;
padding: 0 100px 0 10px;
}
.code /deep/.el-input__suffix {
right: 97px;
}
.el-button {
border: 0;
background: none;
padding: 0;
border-radius: 0;
}
.pic {
width: 80px;
height: 25px;
border-left: none !important;
}
.bind_code_gain {
position: absolute;
top: calc(50% - 9px);
right: 10px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #20aee5;
line-height: 18px;
cursor: pointer;
padding-left: 10px;
border-left: 1px solid #d8d8d8;
}
.login-icon {
width: 16px;
height: 16px;
position: absolute;
top: 14px;
left: 16px;
}
}