快捷導(dǎo)航

vue3+ant?design的form數(shù)組表單校驗方法

更新時間：2023年09月27日 09:21:55 作者：八月十五圓又圓

這篇文章主要介紹了vue3+ant?design的form數(shù)組表單，如何校驗,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧

首先，先說說我要實現(xiàn)的內(nèi)容：如下圖，點“新增”會添加一個灰框內(nèi)容，form表單是一個數(shù)組，一個灰框為一個對象，各對象保存時各自校驗自己表單里的內(nèi)容，互不干擾！

上頁面代碼（看部分代碼就懂了）：

<div v-for="(item,index) in formList" :key="index">
        <a-form
          ref="formRef"
          :rules="rules"
          :model="formList"
          :label-col="{ style: { width: '130px' } }"
        >
          <a-row :gutter="[24, 24]">
            <a-col :span="12">
              <a-form-item
                label="監(jiān)控點位名稱"
                :name="[index,'name']"
                v-bind="validateInfos.name"
              >
                <a-input
                  v-model:value.trim="item.name"
                  placeholder="請輸入監(jiān)控點位名稱"
                  :maxLength="32"
                  autocomplete="off"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-button type="primary" @click="onSubmit(index)" class="mr">
                <template #icon> <SaveOutlined /> </template>保存
              </a-button>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="橫截面積(平方米)"
                :name="[index,'waterDevice','area']"
                v-bind="validateInfos['waterDevice.area']"
              >
                <a-input-number
                  id="inputNumber"
                  v-model:value="item.waterDevice.area"
                  placeholder="請輸入橫截面積"
                  :min="0"
                  :max="999"
                  style="width: 319px;"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="廢水桶高度(米)"
                :name="[index,'waterDevice','height']"
                v-bind="validateInfos['waterDevice.height']"
              >
                <a-input-number
                  id="inputNumber"
                  v-model:value="item.waterDevice.height"
                  placeholder="請輸入廢水桶高度"
                  :min="0"
                  :max="999"
                  style="width: 300px;"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>

上JS 代碼（vue3）：

如果要清空校驗信息，就加上resetFields , 業(yè)務(wù)沒有用到，就不加到上面代碼中了

引入
const { resetFields,validate,validateInfos } = useForm(formList, rules);
用法： 
proxy.$refs.formRef[key].validate()

到此這篇關(guān)于vue3+ant design的form數(shù)組表單，如何校驗的文章就介紹到這了,更多相關(guān)vue3+ant design form數(shù)組表單校驗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: