elementui表单的验证问题
element ui是基于vue的一个ui框架，用起来还是挺不错的，但是有时候还是会遇到一些摸不着头脑的情况。
我在打开一个新增数据的对话框的时候出现了一个问题，明明是新增，但是一打开就出现了错误提示，这肯定是不对的，用户体验也是极其不好的。到底是什么原因导致的呢？
经过我的检查，发现主要原因就是我的新增和修改的对话框是用的同一个，而显示错误提示的都是trigger类型为change的。
具体原因就是因为新增和修改要操作的字段都是一摸一样的，我肯定也不会去写两套代码了呀，通过一些变量我就能区分。但是这就导致了如果我刚刚进入页面的时候，如果第一次点击的是修改按钮，弹出的是修改对话框，那么我会从数据库里拿数据进行数据展示，会将表单的数据初始化一次。那么我第二次点击的按钮是新增按钮时，我肯定会把表单的数据全部置空，从而触发change事件，然后触发表单校验。
部分代码如下：
data() {
return {
formData: {"groupType": null}, // 表单数据，最开始为null
formVisible: false // 表单是否显示,
rules: {groupType: [{ required: true, message: '请输入分组类型', trigger: 'change' }]} // 配置表单验证，在页面上“分组类型”其实是一个下拉选择框
}
},
created() {
// 进行一些初始化
},
methods: {
showUpdateDialog: function () {
// 加载数据
this.$http.get(...).then(
response => {
// 做一些数据处理
...
// 显示对话框
this.formVisible = true;
},
response => console.log(response)
);
},
showCreateDialog: function () {
this.$refs['form'].resetFields();
...
}
}
然后我在网上搜了一下解决办法，大部分都是说用this.$refs[‘form’].resetFields()重置一下就行，我试了但是不行，然后我去看了一下官方文档，重置是重置了，但是是重置为初始值，但是我仔细去研究了一下这个初始值，其实就是第一次给form表单赋值时，它在页面上渲染出来的值。对应上我的操作流程，其实就是我第一次打开修改对话框时，从数据库里拿到的数据，只能说是白给。
虽然白给了，但没有完全白给，官方的这段话其实已经给了答案，稍微调整一下代码。在调用showUpdateDialog方法打开修改对话框时，先直接把对话框显示出来，因为formData中分组类型的初始值是为null，这个时候表单就会渲染，那么下次用resetFields方法重置时，就能帮我重置回null。
部分代码如下：
data() {
return {
formData: {"groupType": null}, // 表单数据，最开始为null
formVisible: false // 表单是否显示,
rules: {groupType: [{ required: true, message: '请输入分组类型', trigger: 'change' }]} // 配置表单验证，在页面上“分组类型”其实是一个下拉选择框
}
},
created() {
// 进行一些初始化
},
methods: {
showUpdateDialog: function () {
// 显示对话框
this.formVisible = true;
// 加载数据
this.$http.get(...).then(
response => {
// 做一些数据处理
...
},
response => console.log(response)
);
},
showCreateDialog: function () {
this.$refs['form'].resetFields();
...
}
}
虽然已经能解决这个问题了，但是还是有一个问题，如果用户使用的时候正好网络不好，但是修改对话框已经打开了，以前的数据还没有加载出来，如果这时候用户胡乱操作很容易造成异常，所以还是等拿到数据后再打开对话框最好。
再次调整代码：
data() {
return {
formData: {"groupType": null}, // 表单数据，最开始为null
formVisible: true // 表单直接显示,
rules: {groupType: [{ required: true, message: '请输入分组类型', trigger: 'change' }]} // 配置表单验证，在页面上“分组类型”其实是一个下拉选择框
}
},
mounted(){
// 隐藏表单
this.dialogFormVisible = false;
},
created() {
// 进行一些初始化
},
methods: {
showUpdateDialog: function () {
// 加载数据
this.$http.get(...).then(
response => {
// 做一些数据处理
...
// 显示对话框
this.formVisible = true;
},
response => console.log(response)
);
},
showCreateDialog: function () {
this.$refs['form'].resetFields();
...
}
}
在初始值设置的时候，就直接把formVisible设置为true，把表单渲染出来，而此时groupType为null，然后在mounted钩子函数中隐藏表单，这样在用户的感知中，表单一直没有显示过，但其实表单数据的初始化已经完成了。这里为什么用mounted而不是在created里做这个事呢，先看看两者的区别：
在Vue中，created和mounted是两个生命周期钩子函数。
created钩子函数在Vue实例创建完成后立即调用，此时模板和虚拟DOM都未渲染成真实的DOM。在这个阶段，可以进行一些初始化操作，如数据的获取、事件的监听等。
mounted钩子函数在Vue实例挂载到真实DOM后调用，此时模板和虚拟DOM已经渲染成真实的DOM。在这个阶段，可以进行一些需要操作DOM的操作，如获取DOM元素、操作DOM等。
总的来说，created适合进行数据的初始化和事件的监听等操作，而mounted适合进行DOM操作和一些需要等待DOM渲染后才能进行的操作。
至此，问题彻底解决。文章来源：https://www.toymoban.com/news/detail-730461.html
文章来源地址https://www.toymoban.com/news/detail-730461.html
到了这里，关于elementui表单的验证问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
