Element的表单验证规则,清空或填充数据如何避免自动触发

前言

使用Element中的form表单检查规则,编辑窗口中填充数据,新建时需清空

需要注意一点:

方法:resetField,不是把表单属性都清空,而是重置为初始值

比如form在加载渲染之前,属性已经被赋值(初始值),所以再次使用resetField不会清空表单数据,而显示初始值

可以理解为重置功能

问题

将表单数据进行清空后,出现表单rules规则自动验证提示

点击编辑,再操作新增,触发了select的change规则

经了解:

  • 可以使用v-if动态销毁,消耗性能
  • 使用官网介绍的clearValidate方法(推荐)

有网友遇到说:clearValidate对change规则不生效

经测试,更新版本后是可以解决change规则自动触发的问题

//清除表单内所有规则检测提示
this.$refs['ruleForm'].clearValidate(); 
//可清除特定属性
this.$refs['ruleForm'].clearValidate('name'); 

如有需要记得使用nextTick方法,在弹框展示出来之前,JS执行完了所以没生效,此方法会在DOM更新后的回调中执行

 this.newVersionBool = true;
 // 清除自动触发的表单验证
 this.$nextTick(()=>{
    this.$refs['ruleForm'].clearValidate();
 })

 保存,操作正常!

评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值