关于a-form-model-item的校验问题踩坑

关于a-form-model-item表单校验方式

对于vue，使用的比较多的方式为官方给出的

在整个表单外部

<a-form-model :rules="rules">

在每个设置好prop的值，这样整个表单就能对相应的item项进行自动绑定校验

<a-form-model-item prop="ruleName">

对于校验规则，vue2的用data（）中设置

data(){

     const checkPerformanceSpec = (rule, value, callback) => {
       //放上校验的代码
      if (optionTure) {
        callback()
      } else {
        callback(new Error('订购时间必须选择'))
      }
    }
    return {
        rules:{
            ruleName: [{ validator: checkPerformanceSpec, trigger: ['blur', 'change'] }]
            //自定义校验规则
            ruleName1: [{ required: true, message: '请选择', trigger: 'change' }]
            //第二种方式
            //第三可以结合一起用
        }
    }
}

vue3.x得去Ant Design Vue中去看咋写

一般的不复杂的情况都能通过上边的解决

异常情况处理：

要监听的表单域不满足自动监听的条件，可以通过如下方式关联表单域：

第一种情况.在这种一个item里嵌套好几个input 的情况

 解决方法antd vue的官网上给出了，亲测有效

这里贴出官方给的方法以及解释：

Form.Item 会对唯一子元素进行劫持，并监听 blur 和 change 事件，来达到自动校验的目的，所以请确保表单域没有其它元素包裹。如果有多个子元素，将只会监听第一个子元素的变化。

如果要监听的表单域不满足自动监听的条件，可以通过如下方式关联表单域：

<a-form-model-item prop="form.name" ref="name" :autoLink="false">
  <a-input v-model="other" />
  <span>hahha</span>
  <div>
    <a-input
      v-model="form.name"
      @blur="() => {$refs.name.onFieldBlur()}"
      @change="() => {$refs.name.onFieldChange()}"
    />
  </div>
</a-form-model-item>

注意：

在我代码中，这里的 autoLink我没有使用，也是可以的。

另外，定义的规则一般是用第一种或者第三种

个人理解，就是给外部的item加上ref,内部input通过动作改变ref。

异常情况2：

在一个item中加上一个可选择的table

 这种情况，需要对异常处理1的做法进行进一步修改

具体处理方式：

1.rule的定义采用第一种方式

2.table的rowselection需要进行修改

                <a-table
                :row-selection="rowSelection"
                :columns="columns"
                :data-source="data"/>

改为

      rowSelection: {
        type: 'radio',
        // onChange: (e) => { //onChange与onSelect用一个就行，他们的e的值是不同的
        //   this.onrowSelectChange(e)
        // },
        onSelect: (e) => {
          this.onrowSelectChange(e)
        }
      },

    methods:{
      onrowSelectChange(value) {
          const ref = this.$refs.performanceSpecA
          ref && ref.onFieldChange()
      },
    }

           如果要做赋值和计算操作，并且在校验的时候会用到该值，

           请在ref改变之前进行操作。不然rule校验会先一步进行，会导致校验出错或者出现永远慢一步的情况

网上 还有别的类似方式，

如：

<div class="flex-row">
  <el-form-item label="加班标准" required>
    <div class="flex-row">
      <el-form-item prop="overtime1">
        <el-input v-model="form.overtime1"></el-input>
      </el-form-item>
      <el-form-item prop="overtime2">
        <el-input v-model="form.overtime2"></el-input>
      </el-form-item>
    </div>
  </el-form-item>
</div>

该方法时el-form-item表单中使用，不知道对于我们的a-form-model-item是否可行