解决:element plus form 表单项的校验validator 函数中callback和修改绑定元素值只能触发一个的问题

元素绑定 输入非法字符后  可以执行重置绑定元素的值,但是callback虽然也执行了只能在控制台显示,并不能提示给用户。

解决  :将validator绑定的函数中  将重置元素值 和 callback执行  两者任何一个做一个异步执行就可以了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 vxe-form ,可以通过设置校验规则的 validator 方法来实现根据一个单项校验另外一个单项。具体实现步骤如下: 1. 在 vxe-form 对需要校验单项设置校验规则,例如: ```html <vxe-form ref="form" :model.sync="formData"> <vxe-form-item prop="number1" label="数字1"> <vxe-input v-model="formData.number1"></vxe-input> </vxe-form-item> <vxe-form-item prop="number2" label="数字2"> <vxe-input v-model="formData.number2"></vxe-input> </vxe-form-item> <vxe-form-item prop="result" label="两数之和"> <vxe-input v-model="formData.result"></vxe-input> <span slot="append">请填写两数之和</span> <span slot="message" class="vxe-form-item--message"></span> <span slot="errorMsg" class="vxe-form-item--error"></span> </vxe-form-item> </vxe-form> ``` 2. 在校验规则设置 validator 方法,该方法接收两个参数:rule 和 value,分别代当前校验规则和当前校验单项。在 validator 方法可以通过 this.$refs.form 取得整个单组件实例,进而取得其他单项进行校验。例如: ```js validations: { number1: [ {required: true, message: '数字1不能为空'} ], number2: [ {required: true, message: '数字2不能为空'} ], result: [ {required: true, message: '两数之和不能为空'}, { validator: (rule, value) => { const number1 = this.$refs.form.getFieldValue('number1') const number2 = this.$refs.form.getFieldValue('number2') if (number1 && number2 && value && Number(number1) + Number(number2) !== Number(value)) { return new Error('两数之和不正确') } return true } } ] } ``` 在上面的校验规则,对两数之和的校验规则设置了 validator 方法,该方法通过 this.$refs.form.getFieldValue('number1') 和 this.$refs.form.getFieldValue('number2') 分别取得数字1和数字2的,然后与当前校验的两数之和进行比较,如果不一致则返回错误信息。 这样就可以根据一个单项校验另外一个单项了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值