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)還未填寫',
				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: '名稱還未填寫',trigger: 'blur'}">
                    <el-input v-model="item.name">
                </el-form-item>
        </template>

代碼說(shuō)明：arry是數(shù)組類型的響應(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ù)的訪問(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ù)訪問(wèn)路徑。

這里可能會(huì)有疑問(wèn)，為什么不能像<el-input v-model="">那樣用v-for迭代過(guò)程中的變量，如上代碼中的item來(lái)寫:prop="item.name"。v-for及迭代變量item是渲染界面時(shí)用的。渲染完，item就不存在，不能訪問(wèn)了。而我們的校驗(yàn)是在渲染完后才啟用的。必須保證后面階段也能訪問(wèn)到對(duì)應(yīng)數(shù)據(jù)。index渲染完也是不可訪問(wèn)的。只是上面的寫法相當(dāng)于把index當(dāng)時(shí)的值固化下來(lái)了，是后面也能訪問(wèn)到。用的是字符串拼接來(lái)引用index，相當(dāng)于閉包的作用。只要符合這樣的機(jī)制，訪問(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)生成的，手寫規(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ī)則既滿足了動(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è)開關(guān)量，當(dāng)個(gè)表單項(xiàng)輸入時(shí)可以開啟彈窗提示，提交表單時(shí)，就不用一個(gè)個(gè)提示了。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論