©2020-2024 ioDraw All rights reserved,
Privacy Policy
点击发送验证码按钮,校验手机号
<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: 25
px; 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; } }