antdv (Ant Design of Vue) 复杂表单验证问题解决方法

我们知道，在简单的表单中，都是一项一项往下排列的，验证的时候也按照字段一一对把规则写好就能验证，如下图

 

 

但是遇到了复杂场景的表单验证，比如一项由多个input、checkbox等等组合而成，在用到 form-model 组件的时候，该如何验证？如下图：

 一个项里面有两个数字input、一个日期input，并且还可以新增。

以及下图场景：数字输入框、下拉选框、文字输入框等等。

 

 

总结来说就是一项需要验证多个子元素。

 

这时我们可以用官方建议的方法解决此类问题：

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>

 

这时可以在 rules 里面写一个自定义 validator 来验证 value 值：

   validator: (rule, value, cb) => {
                        console.log('validator', { rule, value });
                        // 此处写判断value的代码
                        if (wrong) { // 伪代码
                            cb('请设置正确的排序再进行保存');
                        } else {
                            cb();
                        }
                    }        

 

缺点是当验证不通过时，所有子元素都会变红框，暂未找到可以单独控制子元素变红的方法。