element-ui的表单验证如何清除校验提示语(账号密码和手机验证码两种登录方式)
今天做vue后台管理项目的时候,在表单验证环节出了一个bug。这个项目原来是只有一种登录方式的,输入账号和密码即可登录。后来老板又要求增加一个用手机号码获取验证码登录。做好了之后就出现了一个问题,当不输入手机号的时候,下方会有警示,提示你没有输入手机号然后这时点击下方按钮,切换到账号密码登录时,这个警示仍然存在。如图直接说解决方法<!-- 账号密码登录 --><el...
·
今天做vue后台管理项目的时候,在表单验证环节出了一个bug。这个项目原来是只有一种登录方式的,输入账号和密码即可登录。后来老板又要求增加一个用手机号码获取验证码登录。
做好了之后就出现了一个问题,当不输入手机号的时候,下方会有警示,提示你没有输入手机号
然后这时点击下方按钮,切换到账号密码登录时,这个警示仍然存在。
如图
直接说解决方法
<!-- 账号密码登录 -->
<el-form class="login-form" ref="loginForm" :model="loginForm" :rules="loginRules">
<el-form-item class="username-item" prop="username">
<el-input placeholder="账号" v-model="loginForm.username">
<img class="input-icon icon-pdl" slot="prefix" src="@/assets/login/yh.png" />
</el-input>
</el-form-item>
<el-form-item class="password-item" prop="password">
<el-input placeholder="密码" :type="eyes_status ? 'text' : 'password'" v-model="loginForm.password" @keyup.enter.native="handleLogin">
<img class="input-icon icon-pdl" slot="prefix" src="@/assets/login/mm.png" />
<img
class="input-icon xs icon-pdr"
slot="suffix"
:src="eyes_url"
@click="changeEyes"
@mouseenter="changeEyesStatus('enter')"
@mouseleave="changeEyesStatus('leave')"
/>
</el-input>
</el-form-item>
<div class="forget-password">
<!-- <el-checkbox v-model="checked">记住密码</el-checkbox> -->
<router-link to="/reset-password">忘记密码?</router-link>
</div>
<el-form-item>
<el-button @click.native.prevent="handleLogin" :loading="loading" class="handle-login">登 录</el-button>
</el-form-item>
</el-form>
<!--手机验证码登录-->
<el-form class="login-form" ref="loginForm" :model="loginForm" :rules="loginRules">
<el-form-item class="mobile-item" prop="mobile">
<el-input placeholder="请输入手机号" v-model="loginForm.mobile">
<img class="input-icon icon-pdl" slot="prefix" src="@/assets/login/yh.png" />
</el-input>
</el-form-item>
<div class="codeStyle">
<el-form-item class="verifyCode-item verifyStyle" prop="verifyCode">
<el-input placeholder="请输入验证码" v-model="loginForm.verifyCode" @keyup.enter.native="handleLogin" maxlength="6">
</el-input>
</el-form-item>
</div>
<div class="btnStyle">
<el-form-item class="verifyCode-item buttonStyle">
<el-button type="primary" @click="getCode">{{computeTime>0 ? `(${computeTime}s)已发送` : '获取验证码'}} </el-button>
</el-form-item>
</div>
<!-- {{computeTime>0 ? `(${computeTime}s)已发送` : '获取验证码'}} -->
<el-form-item>
<el-button @click.native.prevent="handleLogin" :loading="loading" class="handle-login">登 录</el-button>
</el-form-item>
</el-form>
不知道大家注意到没有,这里两种登录方式用到的是同一个loginRules,而且我在data里面写的也是
loginForm: {
username: "",
password: "",
mobile:"",
verifyCode:"",
loginType:'mobile',
loginWay:false,
},
loginRules: {
username: [
{ required: true, trigger: "blur", validator: validateUsername }
],
password: [
{ required: true, trigger: "blur", validator: validatePassword }
],
// 手机号、验证码为空时登录警示用户
mobile: [
{ required: true, trigger: "blur", validator: shoujihao }
],
verifyCode: [
{ required: true, trigger: "blur", validator: yanzhengma }
]
},
把两种登陆规则写在一起了
改完之后的代码:
把手机验证码登录的验证规则单独写出来
<el-form class="login-form" ref="codeForm" :model="codeForm" :rules="codeRules">
在data里面return
return {
checked: false,loginWay:false,
loginForm: {
username: "",
password: "",
//account代表的是用账号密码登录
loginType:'account',
},
codeForm:{
mobile:"15872609883",
verifyCode:"",
//mobile代表的是用手机号验证码登录
loginType:'mobile',
},
loginRules: {
username: [
{ required: true, trigger: "blur", validator: validateUsername }
],
password: [
{ required: true, trigger: "blur", validator: validatePassword }
],
},
// 手机号、验证码登录规则
codeRules:{
mobile: [
{ required: true, trigger: "blur", validator: shoujihao }
],
verifyCode: [
{ required: true, trigger: "blur", validator: yanzhengma }
]
},
}
然后在methods里面写上清除验证的方法
clearValidate(formName) {
this.$refs[formName].clearValidate();
},
//手机验证码登录界面和账号密码登录界面的相互切换
changeWay(formName){
this.loginWay = !this.loginWay;
if(!this.loginWay){
this.clearValidate('codeForm')
}else{
this.clearValidate('loginForm')
}
console.log(this.loginWay)
},
然后再进行切换时就不会有这个bug了。
虽然问题很简单,但是我上网上查证的时候遇到这个问题的人也挺多的,我这里记录我的解决方法,虽然不一定是最好的,但是希望可以帮到同样遇到这个问题的人。
更多推荐
已为社区贡献2条内容
所有评论(0)