Vue rules动态控制是否校验

文章讲述了在表单中使用变量控制用户离职时间字段的动态校验功能,遇到的两个问题:1)校验时提示文字不消失;2)动态关闭校验后提示未收回。作者提供了相应的解决方案,包括手动验证字段和清除验证。
摘要由CSDN通过智能技术生成

可以使用变量来控制动态是否校验

userEndTime: [
  { required: false, message: "请选择用户离职时间", trigger: "blur" },
],

且用这个来更新

disabled2(newVal) {
  this.$set(this.authUserRules.userEndTime[0], 'required', newVal);
},

但是会有两个问题,一个是,当校验时,非空校验提示文字不收回,那么在单机校验字段方法中添加:

this.$refs.authOrgUserRefDom.validateField('userEndTime');

另一种情况是,当动态控制校验字段不校验后,提示文字不收回,那么在动态控制的字段加如下代码:

this.$refs.authOrgUserRefDom.clearValidate(['userEndTime']);
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中,我们可以使用Vue的官方插件vue-rules来进行字段校验vue-rules通过定义规则和验证方法的方式来实现字段校验。 首先,我们需要在Vue的实例中导入vue-rules插件,并将其注册为全局插件。然后,我们可以在Vue组件的data选项中定义需要进行校验的字段,并给字段设置初始值。 接下来,我们可以在Vue组件的methods选项中定义校验方法。我们可以使用vue-rules提供的验证规则,比如required、length、pattern等来对字段进行校验。在校验方法中,我们可以通过调用vue-rules的验证方法,将需要校验的字段和验证规则作为参数传入。 当用户输入数据时,我们可以在需要验证的字段上监听对应的输入事件,并在事件处理函数中调用对应的校验方法。如果校验失败,我们可以通过给字段绑定一个错误信息的变量,在页面上展示错误信息。 除了在用户输入数据时进行即时校验,我们还可以在提交表单时对所有字段进行校验。我们可以在提交表单的方法中遍历所有需要校验的字段,并逐一调用相应的校验方法,最后根据校验结果来决定是否进行表单提交。 总的来说,使用vue-rules进行字段校验可以帮助我们方便地对用户输入的数据进行验证,并提供了丰富的验证规则来满足不同的校验需求。使用此插件可以有效地提高表单的数据正确性和用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值