在项目开发中用到Element ui表单验证,dialog弹窗验证结束后重新打开还会保留上一次的验证信息,做个笔记记录下解决方法。
1.表单校验
<el-form
:model="formData"
status-icon
:rules="rules"
style="padding:20px 20px 250px 20px;"
ref="formData"
label-width="30%"
>
<el-form-item key="oldPwd" label="旧密码:" prop="oldPwd">
<el-input placeholder="请输入6位旧密码" v-model="formData.oldPwd" maxlength="6" show-password></el-input>
</el-form-item>
<el-form-item key="newPwd" label="新密码:" prop="newPwd">
<el-input placeholder="请输入6位新密码" v-model="formData.newPwd" maxlength="6" show-password>
</el-input>
</el-form-item>
<el-form-item key="checkPwd" label="确认新密码:" prop="checkPwd">
<el-input placeholder="请再次输入6位新密码" v-model="formData.checkPwd" maxlength="6" show-password @keyup.native.13="handlePwd">
</el-input>
</el-form-item>
<p style="color:#FF6600;padding-left:40px;">*必填项</p>
</el-form>
2.清空验证信息的方法
changePwd() {
let self = this;
this.$nextTick(()=>{
self.$refs.formData.clearValidate();
})
},