element-ui的表单验证如何清除校验提示语（账号密码和手机验证码两种登录方式）

今天做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了。
虽然问题很简单，但是我上网上查证的时候遇到这个问题的人也挺多的，我这里记录我的解决方法，虽然不一定是最好的，但是希望可以帮到同样遇到这个问题的人。