el-form表单校验与v-if使用时表单校验失效

54 阅读 0 评论 36 点赞

我是靠谱客的博主落后方盒，最近开发中收集的这篇文章主要介绍el-form表单校验与v-if使用时表单校验失效，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

el-form表单校验与v-if使用时表单校验失效

表单校验注意事项

1、model

el-form标签上的属性:model要绑定表单数据的数据对象

2、rules

el-form标签上的属性:rules要绑定表单校验规则的对象

el-form-item标签的prop属性要对应rules绑定对象的属性

注意：rules绑定对象的属性最好是存在于:model绑定对象的属性

3、ref

获取该表单DOM结构，可以调用validate方法来校验表单

方法一：使用传参的形式

// formName为el-from绑定的ref
formValidate(formName){
this.$refs[formName].validate((valid)=>{
// valid 是表单校验的结果 valid:Boolean
})
}

// 调用
<button @click='formValidate('formName')'></button>

方法二：不传参，直接获取

formValidate(){
// formName为el-from绑定的ref
this.$refs.formName.validate((valid)=>{
// valid 是表单校验的结果 valid:Boolean
})
}

4、el-form或el-form-item与v-if一起使用的时候需要注意加key值

下面是本人踩过的坑，希望可以帮助大家

图一：这是没有给表单加key值的时候，表单校验失效

图二：这是给表单加上key值的时候，表单校验就可以了

代码如下:


<!-- 这是第一个el-form -->
<template>
<el-form
:model="mailVerify"
:rules="mailRules"
ref="mailVerify"
key="mailVerify" ------------重点key
v-if="step === 2"
>
<el-form-item style="margin-bottom: 10px">
<div class="title">
<span>找回密码</span>
</div>
</el-form-item>
<el-form-item>
<el-button class="login-btn" type="primary" @click="secondNext('mailVerify')"
>下一步</el-button
>
</el-form-item>
</el-form>
<!-- 这是第二个el-form -->
<el-form
:model="newPwd"
:rules="newPwdRules"
ref="newPwd"
key="newPwd" ----------重点key
v-if="step === 3"
>
<el-form-item style="margin-bottom: 10px">
<div class="title">
<span>找回密码</span>
</div>
</el-form-item>
<el-form-item prop="password">
<span>设置新密码</span>
<el-input
v-model="newPwd.password"
placeholder="新密码"
type="password"
></el-input>
</el-form-item>
<el-form-item prop="rePassword">
<el-input
v-model="newPwd.rePassword"
></el-input>
</el-form-item>
<el-form-item>
<el-button class="login-btn" type="primary" @click="newPwdConfirm('newPwd')"
>确认</el-button
>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
var validatePass = (rule, value, callback) => {
if (value == "") {
console.log("新密码位空！");
callback(new Error("请输入密码"));
} else {
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === "") {
console.log("再次输入密码");
callback(new Error("请再次输入密码"));
} else if (value !== this.newPwd.password) {
console.log("两次输入不一致");
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
};
var validMail = (rule, value, callback) => {
let reg =
/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(.[a-zA-Z0-9-]+)*.[a-zA-Z0-9]{2,6}$/;
if (!reg.test(value)) {
callback(new Error("请输入正确的邮箱"));
} else {
callback();
}
};
return {
step: 1,
mailVerify: {
mail: "",
},
mailRules: {
mail: [
{ required: true, message: "请输入电子邮箱", trigger: "blur" },
{ validator: validMail, trigger: ["blur", "change"] },
],
},
newPwd: {
password: "",
rePassword: "",
},
// 新密码的校验规则
newPwdRules: {
password: [
{ validator: validatePass, trigger: "blur" },
],
rePassword: [{ validator: validatePass2, trigger: "blur" }],
},
// 修改结果信息
result: {
icon: "success",
title: "操作成功",
subTitle: "新密码已经设置成功！",
},
};
},
methods: {
secondNext(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log("邮箱格式正确");
this.step++;
} else {
console.log("邮箱格式失败");
}
});
},
// 设置新密码确定
newPwdConfirm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.step++;
console.log("校验成功！");
} else {
console.log("校验失败！");
}
});
},
};
</script>