快捷導(dǎo)航

elementUI動態(tài)嵌套el-form表單校驗舉例詳解

更新時間：2023年06月02日 09:12:47 作者：小綿楊Yancy

最近工作遇到個需求,表單可以進(jìn)行增加刪除操作,需要進(jìn)行表單校驗,這篇文章主要給大家介紹了關(guān)于elementUI動態(tài)嵌套el-form表單校驗的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下

一、基礎(chǔ)表單校驗

前端項目開發(fā)過程中表單校驗是非常常見的需求，elementUI的el-form組件也是支持配置rules屬性來配置表單項的校驗。

Form 組件允許你驗證用戶的輸入是否符合規(guī)范，來幫助你找到和糾正錯誤。
Form 組件提供了表單驗證的功能，只需為 rules 屬性傳入約定的驗證規(guī)則，并將 form-Item 的 prop 屬性設(shè)置為需要驗證的特殊鍵值即可。

例如：

不要漏掉el-from-item的prop屬性，需要和rules對象中的屬性字段對應(yīng)。

定義rules對象：

提交表單時驗證規(guī)則：

校驗是通過調(diào)用表單實例（表單組件上的ref屬性綁定的變量）上的validate方法來實現(xiàn)的（異步）

這樣，在我們進(jìn)行驗證時，如果表單項不符合rules中的規(guī)則，那么就會在對應(yīng)的表單項下面提示我們設(shè)定的提示信息。

校驗規(guī)則

elementUI中el-from校驗的規(guī)則是引用的https://github.com/yiminghe/async-validator

比較常用的規(guī)則屬性有：

必填：required

可以賦值一個boolean值，true表示必填。

類型：type

賦值有一個字符，表示要驗證的內(nèi)容的類型：string、number等，詳情見下圖：

正則驗證：pattern

如果對于type無法驗證的值，我們可以使用pattern賦值一個正則表達(dá)式來更加靈活的驗證規(guī)則。

驗證前轉(zhuǎn)換：transform

有時有必要在驗證之前轉(zhuǎn)換一個值，可以使用tansform屬性，是一個函數(shù)，參數(shù)是要驗證的值，該函數(shù)的返回值是處理后再驗證的值。

例如上面代碼name的校驗中就用到了這幾個屬性，其中transform會將用戶輸入的內(nèi)容去掉字符串首位空格（trim方法）后再進(jìn)行其他規(guī)則驗證。

 name: {
    type: 'string',
    required: true,
    pattern: /^[a-z]+$/,
    transform(value) {
      return value.trim();
    },
 }

二、動態(tài)嵌套表單校驗

了解了基礎(chǔ)的表單校驗，那么有的時候會遇到比較復(fù)雜的表單對象，并且可能需要動態(tài)增加表單項。

elementUI官網(wǎng)給出了一個比較簡單的例子：添加/刪除表單項

在此基礎(chǔ)上，我增加了一下表單對象的復(fù)雜度。

可以看到，domains數(shù)組每個對象下包含了info對象屬性，info對象下有name和intro屬性，是一個嵌套的對象，并且我們可以動態(tài)的新增和刪除domains中的對象，那么在表單中該如何驗證呢？

本質(zhì)上，檢驗是通過設(shè)置的rules對象中的屬性，去匹配表單項上設(shè)置的prop，然后對雙向綁定的內(nèi)容進(jìn)行驗證。

首先，我們設(shè)置rules對象：

直接按照表單對象的層級設(shè)置屬性即可，因為domains數(shù)組中的對象肯定是公用一套規(guī)則的。

可以看到，我們直接循環(huán)domains數(shù)組，然后通過設(shè)置prop="'domains.' + index + '.value'"來實現(xiàn)數(shù)組中的每個對象獨立校驗。
接著我們還要在每個表單項el-form-item上定義對應(yīng)的rules，就能達(dá)到新增的表單項也能夠校驗的目的了。

效果：

三、示例源碼

代碼基于vue3 + ts，項目中如果安裝并注冊了elemetPlus，可以直接cv查看效果。

<template>
    <div class="form-box">
        <el-form ref="formRef" :model="dynamicValidateForm" label-width="120px" :rules="rules">
            <div class="inner-form-box">
                <el-form-item prop="email" label="Email??">
                    <el-input v-model="dynamicValidateForm.email" />
                </el-form-item>
            </div>
            <div v-for="(domain, index) in dynamicValidateForm.domains" :key="domain.key" class="inner-form-box">
                <span>{{ `網(wǎng)站${index + 1}??:` }}</span>
                <el-form-item label="網(wǎng)站域名：" :prop="'domains.' + index + '.value'" :rules="rules.domains.value">
                    <el-input v-model="domain.value" />
                </el-form-item>
                <div>
                    <span>{{ `網(wǎng)站${index + 1}詳情??:` }}</span>
                    <el-form-item label="網(wǎng)站名稱：" :prop="'domains.' + index + '.info.name'" :rules="rules.domains.info.name">
                        <el-input v-model="domain.info.name" />
                    </el-form-item>
                    <el-form-item label="網(wǎng)站簡介：" :prop="'domains.' + index + '.info.intro'"
                        :rules="rules.domains.info.intro">
                        <el-input v-model="domain.info.intro" />
                    </el-form-item>
                </div>
                <div class="del-btn-box">
                    <el-button type="danger" link @click="removeDomain(domain)">刪除</el-button>
                </div>
            </div>
            <el-form-item>
                <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
                <el-button @click="addDomain">New domain</el-button>
                <el-button @click="resetForm(formRef)">Reset</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
const formRef = ref<FormInstance>()
const dynamicValidateForm = reactive<{
    domains: DomainItem[]
    email: string
}>({
    domains: [
        {
            key: 1,
            value: '',
            info: {
                name: '',
                intro: ''
            }
        },
    ],
    email: '',
})
const rules = {
    email: [
        {required: true,message: '郵箱地址不能為空哦',trigger: 'blur',},
        {type: 'email',message: '請輸入正確的郵箱格式',trigger: ['blur', 'change'],},
    ],
    domains: {
        value: {required: true,message: '網(wǎng)站域名不能為空哦',trigger: 'blur',},
        info: {
            name: {required: true,message: '網(wǎng)站名稱不能為空哦',trigger: 'blur',},
            intro: {required: true,message: '網(wǎng)站簡介不能為空哦',trigger: 'blur',}
        }
    }
}
interface DomainItem {
    key: number
    value: string
    info: {
        name: string
        intro: string
    }
}
const removeDomain = (item: DomainItem) => {
    const index = dynamicValidateForm.domains.indexOf(item)
    if (index !== -1) {
        dynamicValidateForm.domains.splice(index, 1)
    }
}
const addDomain = () => {
    dynamicValidateForm.domains.push({
        key: Date.now(),
        value: '',
        info: {
            name: '',
            intro: ''
        }
    })
}
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log(dynamicValidateForm)
        } else {
            console.log('error submit!')
            return false
        }
    })
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>
<style scoped>
.form-box {
    padding: 50px;
}
.inner-form-box {
    position: relative;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0px 0px 5px 0px #f2f2f2;
}
.del-btn-box {
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(120%);
}
</style>