Element-ui中自动验证问题的解决

Posted 2021-03-10 ygunoil

Element-ui中的el-form组件自带了验证功能，方便了我们的开发。然而，在开发中经常会遇到一些莫名其妙的问题，比如表单一出来就触发了验证、验证提示出现英文等等。通过查看源代码的方式，我终于找到了问题的根源，也有了解决方法。

在我的项目的一个页面中，需要弹出表单框并填入旧数据。然而，我只要拿到旧数据并赋值到表单上时，就会触发el-form的验证，非常恼人。顺着调用栈（下图）我们可以发现是el-form-item组件的一个叫onFieldChange的方法触发了validate。应该是我们每次给表单绑定的变量重新赋值时，即赋值旧值时，触发了el.form.change事件，从而触发了表单验证。

 

验证结果调用栈

于是，我们可以把验证方式从所有（默认）改成只在blur时才触发，这样就避免了赋值时触发change导致的验证。

然而，新的问题接踵而至，现在打开弹框不仅验证没有消失，验证结果还出现了英文提示：

 

英文提示

这是为什么呢？我在validate方法里面打断点，发现rules出现了一个{ required: true }，然而我并没有加这个验证条件。很明显这个验证条件没带message，导致出现了英文。

往前追踪，在getRules里面发现了这个坑的来源：如果el-form-item组件设置了required属性为true，就会加上这条坑爹的验证，产生英文提示。嗯，把el-form-item的required属性去掉就好了。

现在问题圆满解决，总结一下就是：el-form-item组件千万不要使用required属性（这个属性的初衷难道就是为了坑中文开发者的吗）；验证最好要加上trigger: ‘blur‘，不然每次赋值都会触发验证。

作者：898310778
链接：https://www.jianshu.com/p/d2c900f7b730
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。