ant表单校验页面值符合校验规则 但校验不通过

1. 首先需要确认 表单绑定的model数据源和 表单中每一个子项v-model双向绑定的数据源一致,如 :model = “form” ,那么input中 v-model=  ‘form.xxx’

2.绑定的校验规则也需和定义的规则名一致,如:rules = "rules" , 那么在数据中也需要定义成rules

注:以下是vue+ts写法 get相当于计算属性

get rules () {
    return {
      isAllCancel: [{ required: true, message: '请选择是否全部核销', trigger: 'change' }],
      provisionAmount: [new RuleNumber({ max: 1e13 - 1, min: 0, label: '核销金额' }), { required: true, message: '填写核销金额', trigger: 'change' }]
    }
  }

3. 如果出现页面上值变化了 但是校验仍未通过,可以在自定义校验规则中打印这个value,看组件是否真正获取到了值。value有值说明获取到了,value为null或者undefined说明未获取到


get rules () {
    return {
      isAllCancel: [{ required: true, message: '请选择是否全部核销', trigger: 'change' }],
      provisionAmount: [{
        validator: (rule: unknown, value: string | number, cb: (err?: Error) => void) => {
          console.log(value, '核销')
          cb()
        }
      },
new RuleNumber({ max: 1e13 - 1, min: 0, label: '核销金额' }), 
{ required: true, message: '填写核销金额', trigger: 'change' }]
    }
  }

4. 项目需求: 下拉选择框有全部核销和部分核销, 要求全部核销时,将本金赋值给 核销金额字段,且input 灰显, 选择部分核销时手工录入。之前尝试直接赋值,虽然页面上显示有值,但是组件并未拿到该值,导致校验规则不通过,且由全部核销切换为部分核销时还出现了输入框不能录入的问题。后面解决方法四使用this.$set 赋值,它会强制刷新

 // this.form.planCancleBalance = this.record[0].bizbalance || 0 

// 选择是否全部核销
  changeisAllCancel () {
    if (this.form.isAllCancel === 'Y') {
      // this.form.planCancleBalance = this.record[0].bizbalance || 0 没办法更新组件中值
      // 使用$set强制更新
      this.$set(this.form, 'planCancleBalance', this.record[0].bizbalance || 0)
    }
  }

 5. 尝试过在回调事件函数中,给input赋值后,强制刷新:this.$forceUpdate(); 无用

尝试过赋值之后清空表单校验也无用

<el-input v-model="input2" @input="onInput()" />   
onInput(){
     this.$forceUpdate();
}

1、校验移除clearValidate()移除所有表单项的校验事例
<a-form-model ref="form">  //这⾥放你所展⽰的表单控件   
<a-form-model-item label="姓名" prop="name"> 
  <a-input v-model="testName" autocomplete="off" /> 
   </a-form-model-item> 
</a-form-model>

handleCancel() { 
//移除所有表单项的校验    
this.$refs['form'].clearValidate()   
 //移除其中的某⼀项校验    this.$refs['form'].clearValidate(['name']);    },

clearValidate2、clearValidate和resetFields区别
this.$refs['form'].resetFields() //移除校验结果并重置字段值

this.$refs['form'].clearValidate() //移除校验结果

  • 8
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Vue 3 中使用 Ant Design Vue 的 Form 表单组件进行确认密码校验,你可以自定义校验规则来实现。下面是一个示例: ```vue <template> <a-form ref="form" :model="formData"> <a-form-item label="密码" name="password" rules="required"> <a-input type="password" v-model="formData.password" /> </a-form-item> <a-form-item label="确认密码" name="confirmPassword" rules="required,checkPassword"> <a-input type="password" v-model="formData.confirmPassword" /> </a-form-item> <a-form-item> <a-button type="primary" @click="submitForm">提交</a-button> </a-form-item> </a-form> </template> <script> import { ref } from 'vue'; import { Form, Input, Button, message } from 'ant-design-vue'; export default { components: { 'a-form': Form, 'a-form-item': Form.Item, 'a-input': Input, 'a-button': Button }, setup() { const formRef = ref(null); const formData = ref({ password: '', confirmPassword: '' }); const checkPassword = (_, value) => { if (value !== formData.password) { return Promise.reject(new Error('两次密码输入不一致')); } return Promise.resolve(); }; const submitForm = () => { formRef.value.validate((valid) => { if (valid) { // 验证通过,执行表单提交操作 console.log('表单验证通过'); // ... } else { console.log('表单验证失败'); } }); }; return { formRef, formData, checkPassword, submitForm }; } }; </script> ``` 在上述示例中,我们在确认密码字段的 `a-form-item` 组件上定义了一个名为 `checkPassword` 的校验规则。该规则使用了一个自定义校验函数,并在函数内部判断确认密码是否与密码字段的相同。如果不相同,我们使用 `Promise.reject` 返回一个错误信息,表示校验失败;如果相同,我们使用 `Promise.resolve` 表示校验通过。 然后,我们将这个校验规则 `checkPassword` 应用到确认密码字段的 `rules` 属性中,通过逗号分隔多个规则。注意,我们还将 "required" 规则也应用到了确认密码字段上,以确保确认密码不能为空。 在 `submitForm` 方法中,我们使用 `formRef.value.validate` 方法来进行表单验证,当验证完成后执行回调函数。你可以在回调函数中处理验证通过和验证失败的情况。 希望以上信息对你有帮助!如果你还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值