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

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,159评论 0 29
  • React中没有类似Angular那样的双向数据绑定,在做一些表单复杂的后台类页面时,监听、赋值、传递、校验时编码...
    tedyuen777阅读 9,970评论 1 23
  • 我今天自己读经,我觉得自己读经和跟妈妈一起读经的感觉不一样,跟妈妈一起读比较不害怕,自己读比较害怕,因为没...
    圣言圣语阅读 298评论 0 3
  • 有这样一个地方,从你的青春韶华时起,就注定在你的骨子里镌刻了无法磨灭的印迹,在你灵魂里缠绕上挥之不去的脉脉情丝...
    四毛Q阅读 219评论 0 0
  • 在微信群里看到一句话:“一个人成熟的标志,是在吃自助餐的时候不吃撑”。看完以后,好扎心呀。在今天饿不着的年代里,我...
    凡心素语阅读 735评论 0 1

友情链接更多精彩内容