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

时间：2025-01-22 15:55:04

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

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) => {
          (value, '核销')
          cb()
        }
      },
new RuleNumber({ max: 1e13 - 1, min: 0, label: '核销金额' }), 
{ required: true, message: '填写核销金额', trigger: 'change' }]
    }
  }

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

 // = [0].bizbalance || 0 

// 选择是否全部核销
  changeisAllCancel () {
    if ( === 'Y') {
      //  = [0].bizbalance || 0 没办法更新组件中值
      // 使用$set强制更新
      this.$set(, 'planCancleBalance', [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() //移除校验结果

相关文章