element plus中的form組件自帶校驗(yàn)機(jī)制。在常規(guī)使用場(chǎng)景中，表單項(xiàng)是固定的、明確的，且數(shù)量不會(huì)太多。校驗(yàn)規(guī)則的使用也如下：

<template><div class="edit-page"><el-form :model="formModel" ref="formUser" label-position="top" label-width="auto" :inline="true":rules="rules"><el-row :gutter="20"><el-col :sm="24" :md="12"><el-form-item label="賬號(hào)" prop="loginId"><el-input v-model="formModel.loginId" autocomplete="off clearable/></el-form-item></el-col></el-row></el-form></div>
</template><script setup>
....
const formModel = reactive({loginId:null
})const rules = reactive({loginId: [{required: true,message: '賬號(hào)還未填寫(xiě)',trigger: 'blur'},{min: 2,max: 20,message: '賬號(hào)長(zhǎng)度應(yīng)該為2-20',trigger: 'blur'}]
})
</script>

校驗(yàn)規(guī)則在代碼塊單獨(dú)定義，規(guī)則的匹配遵循：rules對(duì)象中的屬性名與el-form-item 中prop屬性名一致。（當(dāng)然校驗(yàn)規(guī)則也可以在el-form-item行內(nèi)定義）

但對(duì)應(yīng)動(dòng)態(tài)生成的el-form-item 如何增加校驗(yàn)規(guī)則呢？改用行內(nèi)定義，具體方法如下：

<el-form-item?:prop="xx"? ?:rules="{required: true, message: 'Please input Activity name', trigger: 'blur'}">....</el-form-item>

這里要重點(diǎn)說(shuō)明prop的設(shè)置，這是給動(dòng)態(tài)表單項(xiàng)增加校驗(yàn)的關(guān)鍵所在。

由于是動(dòng)態(tài)生成表單項(xiàng)，所以代碼可能如下

<el-form :model="arry"><template v-for="(item,index) in arry" :key="index"><el-form-item :prop="'['+index+'].name" :rules="{required: true,message: '名稱(chēng)還未填寫(xiě)',trigger: 'blur'}"><el-input v-model="item.name"></el-form-item></template>

代碼說(shuō)明：arry是數(shù)組類(lèi)型的響應(yīng)式對(duì)象如：

const arry=ref([{name:'a'},{name:'b'}])

這個(gè)arry可能是從后臺(tái)接口返回的數(shù)據(jù)。所以由該數(shù)據(jù)生成的表單項(xiàng)是動(dòng)態(tài)的。

根據(jù)推測(cè)，校驗(yàn)機(jī)制可能是這樣的：

1.對(duì)于每個(gè)表單項(xiàng)要能確定其使用的校驗(yàn)規(guī)則，這個(gè)基本在定義階段就可以確定下來(lái)（行內(nèi)定義校驗(yàn)規(guī)則；或者單獨(dú)定義且保證規(guī)則名與prop值一致）；

2.在應(yīng)用校驗(yàn)規(guī)則時(shí)要能獲取到表單項(xiàng)的當(dāng)前值。而表單項(xiàng)的當(dāng)前值我們一般用v-model指令綁定到響應(yīng)式數(shù)據(jù)對(duì)象上了。所以只要能取到對(duì)應(yīng)的響應(yīng)式數(shù)據(jù)即可。

這就體現(xiàn)prop屬性的第二個(gè)作用了，定位響應(yīng)數(shù)據(jù)的訪(fǎng)問(wèn)路徑。（第一個(gè)作用是匹配校驗(yàn)規(guī)則）

通過(guò)<el-form :model="arry">? ? 與? <el-form-item :prop="'['+index+'].name"> 中的 model屬性值+prop屬性值組合："arry['"+index+'].name" 來(lái)確定數(shù)據(jù)訪(fǎng)問(wèn)路徑。

這里可能會(huì)有疑問(wèn)，為什么不能像<el-input v-model="">那樣用v-for迭代過(guò)程中的變量，如上代碼中的item來(lái)寫(xiě):prop="item.name"。v-for及迭代變量item是渲染界面時(shí)用的。渲染完，item就不存在，不能訪(fǎng)問(wèn)了。而我們的校驗(yàn)是在渲染完后才啟用的。必須保證后面階段也能訪(fǎng)問(wèn)到對(duì)應(yīng)數(shù)據(jù)。index渲染完也是不可訪(fǎng)問(wèn)的。只是上面的寫(xiě)法相當(dāng)于把index當(dāng)時(shí)的值固化下來(lái)了，是后面也能訪(fǎng)問(wèn)到。用的是字符串拼接來(lái)引用index，相當(dāng)于閉包的作用。只要符合這樣的機(jī)制，訪(fǎng)問(wèn)路徑即便更復(fù)雜，比如雙重迭代。也是可以使用自帶校驗(yàn)的。

優(yōu)化：上面介紹的規(guī)則定義是放在<el-form-item>行內(nèi)定義的，在有些場(chǎng)景下，比如：一張大的填報(bào)報(bào)表，都是需要輸入大于0的數(shù)值的。當(dāng)然上面的表單項(xiàng)本身是動(dòng)態(tài)生成的，手寫(xiě)規(guī)則的地方也不算多。為了驗(yàn)證猜想，及優(yōu)化代碼。能不能定義一個(gè)規(guī)則函數(shù)，將這個(gè)函數(shù)設(shè)置給 :rules屬性。經(jīng)過(guò)實(shí)驗(yàn)是可以的。

const ruleFloat=(msg)=>{return {pattern:/^\d+(\.\d+)?$/,message:`${msg}應(yīng)為大于0的數(shù)值`,trigger:'blur'}}

而使用地方改為如下：

<el-form-item :rules="ruleFloat('身高')">

這樣使用校驗(yàn)規(guī)則既滿(mǎn)足了動(dòng)態(tài)表單的需求，也最大限度地減少代碼。

最后一點(diǎn)，在報(bào)表填報(bào)中，是不適合在輸入框附近顯示校驗(yàn)失敗信息的。改為浮動(dòng)彈框提示比較好。如用ElMessage.error('xx')。具體實(shí)現(xiàn)方式如下：

在<el-form>上設(shè)置屬性，:show-message="false" 即關(guān)閉文本信息顯示，增加校驗(yàn)事件處理函數(shù)@validate（每個(gè)表單項(xiàng)驗(yàn)證時(shí)都會(huì)觸發(fā)該事件）

<el-form?:show-message="false"??@validate="onValidate">

在處理函數(shù)中根據(jù)函數(shù)參數(shù)（prop,isValid,message）進(jìn)行彈窗提示，詳情看官方文檔。

最后提交數(shù)據(jù)時(shí)，一般會(huì)調(diào)用表單對(duì)象的驗(yàn)證方法，這個(gè)方法會(huì)再對(duì)每個(gè)表單項(xiàng)進(jìn)行驗(yàn)證，如有未驗(yàn)證通過(guò)的，會(huì)依次觸發(fā)@validate事件，也就依次彈窗提示，體驗(yàn)不是很好。可以只彈一次給個(gè)籠統(tǒng)點(diǎn)的提示，如：還有校驗(yàn)未通過(guò)的數(shù)據(jù)，請(qǐng)先修改。此時(shí)可以設(shè)置個(gè)開(kāi)關(guān)量，當(dāng)個(gè)表單項(xiàng)輸入時(shí)可以開(kāi)啟彈窗提示，提交表單時(shí)，就不用一個(gè)個(gè)提示了。