elementUI表单验证踩坑问题怎么搞定

发布时间：2023-08-03 10:51:06 所属栏目：教程来源：互联网

导读： 　　为大家详细介绍“elementUI表单验证踩坑问题怎么解决”，内容详细，步骤清晰，细节处理妥当，希望这篇“elementUI表单验证踩坑问题怎么解决”文章能帮助大家解决疑

　　为大家详细介绍“elementUI表单验证踩坑问题怎么解决”，内容详细，步骤清晰，细节处理妥当，希望这篇“elementUI表单验证踩坑问题怎么解决”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

　　我总结之后，有四个要注意：

　　1.在v-for的列表下，form表单的验证该如何精确触发

　　2.对list进行增删操作的时候，如何确保视图正确更新

　　3.自定义验证规则的时候，如何知道操作的数据在数据结构中的准确位置

　　4.对象深层的key验证该如何触发

　　这是要操作的列表：elementUI表单验证踩坑问题怎么解决

　　 <div

　　          class="boxItem"

　　          v-for="(item, index) in formData.boxList"

　　          :key="item.guid"

　　        >

　　         <el-form-item

　　              :label="keytolabel(subkey)"

　　              v-for="(subItem, subkey) in item"

　　              :key="subkey"

　　              :prop="`boxList.${index}.${subkey}`"

　　         </el-form-item>

　　 </div>

　　第一个问题的解决方案：

　　我们在遍历form-item的时候，就需要prop属性，根据官方文档的说明，prop是表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的。正是这个属性，可以让组件知道触发的时机。其中的触发逻辑没有去深入研究。

　　 :prop="`boxList.${index}.${subkey}`"

　　在rules这里sybkey要和rules的key值对应上才可以正常触发

　　     rules: {

　　        screenlength: [{ validator: lengthhandler, trigger: "blur" }],

　　       }

　　如上述所示，根据list的数量进行遍历行数，再根据item来遍历列数。每一列都有不定数量的key值，那么在这里的我们需要给prop指定到准确的位置，大概模式就是父key.行数.列key，简单地来说，就是要将这个值所在的数据结构位置告诉element组件。

　　根据我的猜测，element表单组件触发验证的逻辑是监听这个值的变化，根据给定的触发条件（change，input，blur，focus等等），符合触发条件就去对比是否发生值的变化，然后根据验证规则去做相应的提示。

　　第二个问题的解决方案：

　　我们在遍历form-item的时候,vue会要求必须有一个key，这样可以正确更新视图。那么这一个key最大的特点是要操持唯一。我的方案是给key值生成一个唯一id，或者new Date().getTime()生成一个时间戳，当我们对列表进行操作的时候，就会正确更新视图了。

　　例如：当我们触发第一和第二的item验证的时候

　　elementUI表单验证踩坑问题怎么解决再去删除第二个item，视图就会在删除之后，验证提示会删除

　　如果不是唯一key，例如使用index做key值，那么这个key是不会变化的，删除第二个item就会出现以下情况

　　当发生这种情况的时候，你应该考虑的是vue的视图更新规则

　　第三个问题的解决方案：

　　自定义验证规则在官方文档有详细的说明，这一块就不用细说了，但是里面的触发逻辑需要根据情况来修改代码。例如总数是根据前面的长和高相乘公式得出的，那么我们需要每次在长和高的值变化的时候，就需要去计算总数，然后根据规则去进行提示。

　　设置一个currentIndex，在长和高的输入框组件上定义focus事件，每次触发就说明输入框在操作，这一行就被操作的一行数据，那么在定义验证的时候就知道是哪一行了

　　 // 在组件focus的时候,就说明想操作这个组件,提前将位置记录,以便于数据验证

　　    focus(data) {

　　      this.currentIndex = data.index;

　　    },

　　当然，代码还是要根据具体交互来编写

　　第四个问题的解决方案：

　　很多时候，我们都只是对表层key进行验证，所以如果需要验证对象的深层可以的时候，我们需要做特殊处理，和第一个问题的处理方式类似，但又不完全相同。

　　// 要验证的数据结构：

　　    formData：{

　　        sendcard：{

　　        sendcardsource：""

　　        }

　　    }

　　    //prop：组件属性

　　      <el-form-item prop="sendcard.sendcardsource">

　　      </el-form-item>

　　   //rules:规则设置

　　        rules: {

　　        // 发送卡

　　        "sendcard.sendcardsource": [commonRule],

　　        }

　　这里的特点就是需要在rules属性定义一个验证验证规则，prop的值要跟rules的值对应上才可以触发。这里的特点是，对象和对象的可能会有相同的key，所以这样做是可以在rules设置一个唯一的触发key值。

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!