vue+antdesign表单校验，动态循环遍历生成的表单或者单个表单，单条a-form-model-item中有多条需要校验的字段合并成一个校验规则；表单多个字段相关联进行校验

前提是以下a-form-model是根据动态数组遍历循环生成的，如果使用自定义校验规则validator的话会导致多个循环表单数据校验失败。

form表单中a-form-model-item中有多个字段组合，都需要校验，htm代码如下：

<a-form-model
    ref="skuDetailForm"
    :model="skuDetailForm"
    :rules="skuDetailRules"
    :colon="false"
>
   <a-form-model-item>                                
    <span slot="label" class="label-title">
       <label for="">长*宽*高</label>
    </span>
    <a-input-group compact>
          <a-input-number v-model.trim="skuDetailForm.outerBoxLength" allow-clear :precision="2" class="group-input-small"></a-input-number>
          <a-input-number v-model.trim="skuDetailForm.outerBoxWidth" allow-clear :precision="2" class="group-input-small"></a-input-number>
          <a-input-number v-model.trim="skuDetailForm.outerBoxHeight" allow-clear :precision="2" class="group-input-small"></a-input-number>
          <a-select v-model.trim="skuDetailForm.outerBoxUnit" allow-clear class="group-input-small">
         <a-select-option :value="unit" v-for="(unit, l) in longUnitList" :key="l">{{unit}}</a-select-option>
         </a-select>
      </a-input-group>
</a-form-model-item>
</a-form-model>

要实现表单校验，长宽高单位任一项都为必填

 

方案1： 三元运算符

 :prop=""中使用三元运算根据属性值依次变更需要检验的字段值

<a-form-model
    ref="skuDetailForm"
    :model="skuDetailForm"
    :rules="skuDetailRules"
    :colon="false"
>
<!-- 三元运算符动态绑定prop的长宽高单位，依次校验为必填项-->

   <a-form-model-item 
:prop="skuDetailForm.outerBoxLength?(skuDetailForm.outerBoxWidth?(skuDetailForm.outerBoxHeight?'outerBoxUnit':'outerBoxHeight'):'outerBoxWidth'):'outerBoxLength'">                                
    <span slot="label" class="label-title">
       <label for="">长*宽*高</label>
    </span>
    <a-input-group compact>
        .....代码同上
    </a-input-group>
</a-form-model-item>
</a-form-model>

 js代码如下

// sku信息校验规则
skuDetailRules: {
    outerBoxLength: [{ required: true, message: '请填写完整', trigger: 'blur, change' }],
    outerBoxWidth: [{ required: true, message: '请填写完整', trigger: 'blur, change' }],
    outerBoxHeight: [{ required: true, message: '请填写完整', trigger: 'blur, change' }],
    outerBoxUnit: [{ required: true, message: '请填写完整', trigger: 'blur, change' }]
},

如果是针对于唯一form表单的话是可以直接使用validator自定义校验规则进行设置

data () {
    let validateSKU = (rule, value, callback) => {
        // 判断逻辑
        if (this.form.sku.length > 11) {
            callback(new Error('Please select'))
          } else {
            callback()
          }
    }
    return {
        form: {sku: ''},
        rules:{
            sku: [
              { required: true, message: 'Please input', trigger: 'blur' },
              { validator: validateSKU, trigger: 'blur' }
            ]
        }
    }
}

方案1缺点：

校验后信息填写完整后校验信息不消失，但不会影响保存

方案2：动态属性，自定义校验，可解决动态循环表单互不影响

HTML部分：

<div class="sku-list-item"
           v-for="(skuDetailForm, skuIndex) in form.skus"
           :key="skuIndex">
    <div class="sku-info-detail">
            <a-form-model
              ref="skuDetailForm"
              :model="skuDetailForm"
              :rules="skuDetailRules"
              :colon="false">

    <a-form-model-item prop="skuZhName">
          <span slot="label" class="label-title">
              <label for="skuZhName">{{ $t('m.scpProductCenter.zhName') }}</label>
          </span>
          <a-input v-model.trim="skuDetailForm.skuZhName" allowClear
    </a-form-model-item>

// 必填时多个字段使用一个表单校验字段进行判断是否填写完整
    <a-form-model-item  prop="grossWeight" :ref="`grossWeight${skuIndex}`"
        :rules="{ required: true,
     validator: (rule, value, callback) => validateGrossWeight(skuDetailForm, callback),
     trigger: ['blur', 'change']}">
            <a-input-group compact>
               <a-input-number v-model.trim="skuDetailForm.grossWeight" 
                   allow-clear class="group-input"
                   :precision="2" :min="0" :max="10000"
                   @blur="()=>{$refs[`grossWeight${skuIndex}`][0].onFieldBlur()}">    
                </a-input-number>
// 注意区分change事件和blur事件
                <a-select v-model.trim="skuDetailForm.grossWeightUnit" 
                          class="group-input-small" allow-clear
                        @change="()=>{$refs[`grossWeight${skuIndex}`][0].onFieldChange()}">
                     <a-select-option :value="unit" 
                        v-for="(unit, u) in weightUnitList" :key="u">{{unit}}
                        </a-select-option>
                     </a-select>
           </a-input-group>
  </a-form-model>
</div>
</div>

JS部分

data() {

    return: {

        // 信息校验规则
        skuDetailRules: {
                    skuZhName: [{ required: true, message: this.$t('m.scpProductCenter.pleaseEnter'), trigger: 'blur' }]
        }
        
    }
}

methods：{

validateGrossWeight (form, callback) {
      if (!form.grossWeight) {
        callback(new Error('请输入重量'))
      } else if (!form.grossWeightUnit) {
        callback(new Error('请输入单位'))
      } else {
        callback()
      }
    }

}