文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

elementUI表单验证踩坑问题怎么解决

2023-07-05 13:34

关注

本文小编为大家详细介绍“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,视图就会在删除之后,验证提示会删除

elementUI表单验证踩坑问题怎么解决

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

elementUI表单验证踩坑问题怎么解决

当发生这种情况的时候,你应该考虑的是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值。

读到这里,这篇“elementUI表单验证踩坑问题怎么解决”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯