vue elementUI组件表单动态验证失效的问题与解决办法

最新推荐文章于 2024-01-25 11:04:31 发布

转载最新推荐文章于 2024-01-25 11:04:31 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/sinat_36521655/article/details/102691019

其他专栏收录该内容

17 篇文章

订阅专栏

本文介绍了在Vue项目中使用Element UI实现动态表单验证的方法。针对特定场景需求，通过不同尝试，最终找到有效解决方案，包括利用v-if和key属性强制重新渲染表单，以及动态修改rules对象或form-item的rules属性。

一、缘由
在项目中，有一个需求是需要根据条件给表单项添加验证属性prop确定是否验证表项。

二、第一次实现与遇到的问题
比如银行卡号根据输入年龄进行判断，如果大于等于18岁才需要填入银行卡号。最先的想法先设置好el-form的rules，然后通过三元表达式赋值prop属性，实现动态验证，示例如下：

<template>
<el-form ref="ruleForm" :model="formData" :rules="rules">
<el-form-item label="名字" prop="name">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="formData.age"></el-input>
</el-form-item>
<el-form-item label="银行卡号" :prop="formData.age >= 18 ? 'bankCardNo' : ''">
<el-input v-model="formData.bankCardNo"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: 'HelloWorld',

data () {
return {
rules: {
name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
bankCardNo: [{ required: true, message: '请输入银行卡号', trigger: 'blur' }]
},
formData: {
name: '',
age: '',
bankCardNo: ''
}
}
}
}
</script>
但是发现虽然页面有了红色星号的验证提示，但实际上当失去焦点的时候并未触发校验，如图所示：

三、遇到问题的原因
所以去查阅了elementUI的官方文档，文档给出了一种动态添加表单项动态的验证的示例，示例代码如下：

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
<el-form-item
prop="email"
label="邮箱"
:rules="[
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]"
>
<el-input v-model="dynamicValidateForm.email"></el-input>
</el-form-item>
<el-form-item
v-for="(domain, index) in dynamicValidateForm.domains"
:label="'域名' + index"
:key="domain.key"
:prop="'domains.' + index + '.value'"
:rules="{
required: true, message: '域名不能为空', trigger: 'blur'
}"
>
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
<el-button @click="addDomain">新增域名</el-button>
<el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
dynamicValidateForm: {
domains: [{
value: ''
}],
email: ''
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
removeDomain(item) {
var index = this.dynamicValidateForm.domains.indexOf(item)
if (index !== -1) {
this.dynamicValidateForm.domains.splice(index, 1)
}
},
addDomain() {
this.dynamicValidateForm.domains.push({
value: '',
key: Date.now()
});
}
}
}
</script>
其运行结果如下：

但官方文档提供的示例与我想要的并不一样，于是上网查找了其他资料。

发现我的方法与官方文档的区别在于，官方文档的示例是通过v-for循环的方式渲染出来的表单，当数组domains变化时会触发表单的重新渲染（起初并未意识到这一点），所以能够有效的动态验证表单，而我的方法只是动态修改了props属性，而并未出发表单的重新渲染，验证器中的prop属性并未更新，还是初次渲染时的空值，知道原因就想到了解决办法。

四、第二次实现与遇到的问题
我的思路是通过v-if和v-else写两个表单项，一个带prop属性，一个不带prop属性，通过强制销毁和创建表单实现表单的重新渲染。

实际上出现这个问题是因为vue的diff算法，在diff算法中会尽可能的复用组件，所以此处看上根据formData.age是否大于等于18进行切换，但实际上diff算法会复用组件，并没有重新渲染，所以需要配合key属性。

官方文档是这样介绍的：

Vue代码风格指南

五、最终解决办法
完整代码如下：

<template>
<el-form ref="ruleForm" :model="formData" :rules="rules">
<el-form-item label="名字" prop="name">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="formData.age"></el-input>
</el-form-item>
<el-form-item label="银行卡号" key="1" v-if="formData.age >= 18" prop="bankCardNo">
<el-input v-model="formData.bankCardNo"></el-input>
</el-form-item>
<el-form-item label="银行卡号" key="2" v-else>
<el-input v-model="formData.bankCardNo"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: 'HelloWorld',

data () {
return {
rules: {
name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
bankCardNo: [{ required: true, message: '请输入银行卡号', trigger: 'blur' }]
},
formData: {
name: '',
age: '',
bankCardNo: ''
}
}
}
}
</script>
最终效果如图，当年龄大于等于18时就会触发验证器。

2020年4月3日更新
上述方法没有真正理解原因，可以查看本人新文章《深入了解Element Form表单动态验证问题》，提及两种新解决办法：

1. form-item保留prop属性，根据条件动态修改form组件的rules对象

watch: {
'formData.age': {
immediate: true,
handler (newVal) {
if (newVal >= 18) {
this.addRule('bankCardNo', [{ required: true, message: '请输入银行卡号', trigger: 'blur' }])
} else {
this.addRule('bankCardNo', [])
}
}
}
}

data () {
return {
rules: {}
}
},

methods: {
addRule (prop, rule) {
this.$set(this.rules, prop, rule)
}
}
2. form-item保留prop属性，根据条件动态修改form-item组件的rules属性。比如下面两种方式，因为rules属性接受数据和对象

<el-form-item label="银行卡号" prop="bankCardNo" :rules="formData.age >= 18 ? [{ required: true, message: '请输入银行卡号', trigger: 'blur' }] : []">
<el-input v-model="formData.bankCardNo"></el-input>
</el-form-item>


<el-form-item label="银行卡号" prop="bankCardNo" :rules="formData.age >= 18 ? { required: true, message: '请输入银行卡号', trigger: 'blur' } : []">
<el-input v-model="formData.bankCardNo"></el-input>
</el-form-item>