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',不然每次赋值都会触发验证。