Element表单项部分没有绑定prop,清除验证时导致报错

前阵子写项目的时候,遇到过关于Element表单验证导致的一个问题:

一开始我在Dialog 组件里录入表单信息,因为有几项信息是选填的,就没有绑定prop验证,然后在关闭窗口时按照惯例进行数据还原以及清除表单验证:

    closeModal() {
      // 关闭modal
      this.restData();
      this.$emit("close", false);
    },
    restData() {
      //重置数据
      this.personalForm = {};
      this.$refs.personalForm.resetFields();
    },

一开始的时候还没发现什么问题,但测试的时候,这个窗口在第二次打开后点击关闭时开始报错:
在这里插入图片描述
接下来就是各种逻辑打印,翻不起浪花来还白白浪费时间。问了前辈才知道是因为表单里有几项item没有绑定prop,可能就导致清除表单验证时索引出错之类的问题。

然后我就抱着半信半疑的态度先注释了那几项没有绑定prop的item,发现真的不会报错。就给那几项item绑定了prop,但因为又不需要真的验证,所以:

		sender: [{ required: false }],
        senderPhone: [{ required: false }],
        senderEmail: [{ required: false }],

然后就可以了!!!
又是一次完美的踩坑

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Element验证是什么? Vue Element验证是一种基于Vue.js和Element组件库的验证方式,通过使用Vue提供的数据驱动的方式,实现实检测单输入数据的合法性,并在输入无效提示误信息。Vue Element验证能够有效地防止用户输入不合法数据,提高应用程序的数据质量。 Vue Element验证的特点: 1. 数据驱动:Vue利用双向机制,保证了误信息和单输入数据的实更新。 2. 灵活:可以选择自验证规则或使用Element库提供的验证方法。 3. 原子性:每个单项验证都是独立的,互不干扰。 4. 可扩展:可以通过自义指令和插件来扩展验证功能。 Vue Element验证的实现方式: 1. 在模板中使用el-form组件包裹单项,通过设置rules属性指验证规则。 2. 在data中单数据,通过v-model指令输入框值。 3. 在methods中义提交单方法,通过this.$refs.form.validate()方法进行验证。 4. 根据验证结果来决是否提交单数据。 Vue Element验证的基本规则: 1. required:必填项。 2. min/max:最小值/最大值。 3. pattern:正则达式。 4. validator:自验证函数。 需要注意的是,使用Element验证规则,需要在el-form-item组件中使用prop属性指的数据项。 Vue Element验证的优缺点: 优点: 1. 数据和视图之间紧密,实更新误信息和单数据。 2. 可以选择自验证规则或使用Element提供的验证类,具有灵活性。 3. 可以有效预防用户输入不合法数据,提高数据质量。 4. 可扩展性强,可以通过自义指令和插件来扩展验证功能。 缺点: 1. 对于复杂的单结构,需要编写大量的验证规则。 2. 使用Element库自带的验证规则,需要掌握Element库的使用方法。 3. 自验证规则需要了解正则达式的使用,对于一些开发者来说可能存在一的难度。 总结: Vue Element验证是一种非常方便使用的验证方式,能够有效地预防用户输入不合法数据,提高应用程序的数据质量。同,Vue Element验证也具有灵活性和可扩展性,可以根据具体业务需求自验证规则或使用Element提供的验证类,实现更加精细的验证效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值