antd+vue3實現動態表單的自動校驗

由於vue3用的人還不多，所以有些問題博主踩了坑只能自己爬出來了，特此做個記錄。如有錯誤，請大家指正。

　　回歸正題，我所做的業務是，動態添加表單項，對每一項單獨做校驗，效果如下：

　　

 

　　主要代碼如下：

<a-form
    name="custom-validation"
    ref="formRef"
    :model="modelRef"
    :rules="rules"
    v-bind="layout"
    @finish="handleFinish"
    @finishFailed="handleFinishFailed"
  >
    <div class="card-box">
      <div class="card-head">基礎信息</div>
      <div class="card-body">
        <a-form-item label="食材名稱" name="name">
          <a-input v-model:value="modelRef.name" autocomplete="off" />
        </a-form-item>
        <a-form-item label="食材編號" name="foodNumber">
          <a-input v-model:value="modelRef.foodNumber" autocomplete="off" />
        </a-form-item>
        <a-form-item label="食材類型" name="foodType">
          <a-select v-model:value="modelRef.foodType" placeholder="">
            <a-select-option value="shanghai">Zone one</a-select-option>
            <a-select-option value="beijing">Zone two</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="食材產地" name="birthplace">
          <a-input v-model:value="modelRef.birthplace" autocomplete="off" />
        </a-form-item>
      </div>
    </div>
    <div class="card-box">
      <div class="card-head">營養成分信息</div>
      <div class="card-body">
        <a-button primary shape="round" @click="onAdd">
          <PlusSquareOutlined /> 新增
        </a-button>
        <div class="nutrients-content-box">
          <a-row type="flex" justify="space-between" align="middle">
            <a-col :span="5" v-for="(item,index) in modelRef.nutrients" :key="index">
              <div class="nutrients-input-box card-box">
                <div>{{item.name}}</div>
                <div class="flex-align-end">
                  <div>
　　　　　　　　　　　　　注:form.item的name必須與modelRef里面的字段保持一致，否則無法實現自動校驗，所以此處name使用動態數據，
　　　　　　　　　　當數組nutrients值改變時，就往modelRef里面加字段（與這里的name保持一致）。下面代碼有說明
                    <a-form-item :name="item.id+'nutrients'"

　　　　　　　　　　　　　　　　　　　　　當name設置成功了，此處的規則便會在change觸發后執行
                                 :rules="[{validator: validateNutrients, trigger: 'change'}]">
                      <a-input v-model:value="item.value" @change="onFieldChange(item)"/>
                    </a-form-item>
                  </div>
                  <span>{{item.unit}}</span>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
    <div class="op-btn-box">
      <a-form-item :wrapper-col="{ span: 12, offset: 18 }">
        <a-button>取消</a-button>
        <a-button type="primary" style="margin-left: 10px" html-type="submit">保存</a-button>
      </a-form-item>
    </div>
  </a-form>

import { onMounted, reactive, toRefs, watch } from 'vue'
setup() {
　　　　//表單校驗里的name值必須與此處的字段保持一致  3     const modelRef = reactive({
      name: '',
      foodNumber: '',
      foodType: null,
      birthplace: '',
      nutrients: [],
    })
    const layout = {
      labelCol: { span: 2 },
      wrapperCol: { span: 6 },
    }
　　　　//此處為動態表單的自定義規則 14     const validateNutrients = async (rule, value) => {
      if (!value) {
        return Promise.reject(new Error('請輸入數值'))
      }
      const numReg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/
      if (!numReg.exec(value)) {
        return Promise.reject(new Error('請輸入正確數字'))
      }
    }

　　　　//其他普通的校驗，可做統一處理
    const rules = {
      name: [
        { required: true, message: '請輸入食材名稱', trigger: 'change' },
        { max: 20, message: '最多輸入20字', trigger: 'change' },
      ],
      foodNumber: [
        { required: true, message: '請輸入食材編號', trigger: 'change' },
        { max: 20, message: '最多輸入20字', trigger: 'change' },
      ],
      foodType: [
        { required: true, message: '請選擇食材類型', trigger: 'change' },
      ],
      birthplace: [
        { required: true, message: '請輸入食材產地', trigger: 'change' },
        { max: 20, message: '最多輸入20字', trigger: 'change' },
      ],
    }

　　　　//此處是關鍵，modelRef.nutrients是遍歷動態表單所用的數組，當數組值改變時，往modelRef里面加字段，與上面的動態循環出來的form.item的name保持一致
    watch(
      () => modelRef.nutrients,
      val => {
        if (val.length) {
          val.forEach(item => {
            modelRef[`${item.id}nutrients`] = item.value
          })
        }
      },
    )
    /* 提交保存 */
    const handleFinish = (values) => {
      console.log(values)
    }
    const handleFinishFailed = (errors) => {
      console.log(errors)
    }
　　　//輸入框的值改變時，需要更新modelRef里動態添加的字段的值，否則校驗會出錯。 59     const onFieldChange = (item) => {
      modelRef[`${item.id}nutrients`] = item.value
    }

    return {
      ...toRefs(state),
      modelRef,
      rules,
      layout,
      handleFinish,
      handleFinishFailed,
      validateNutrients,
      onFieldChange,
    }
  },