element plus中的form組件自帶校驗(yàn)機(jī)制

在常規(guī)使用場景中，表單項(xiàng)是固定的、明確的，且數(shù)量不會太多。

校驗(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="賬號" 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: '賬號還未填寫',
				trigger: 'blur'
			},
			{
				min: 2,
				max: 20,
				message: '賬號長度應(yīng)該為2-20',
				trigger: 'blur'
			}
		]
})
</script>

校驗(yàn)規(guī)則在代碼塊單獨(dú)定義

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

但對應(yī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)說明prop的設(shè)置，這是給動態(tài)表單項(xiàng)增加校驗(yàn)的關(guān)鍵所在。

由于是動態(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>

代碼說明：arry是數(shù)組類型的響應(yīng)式對象如：

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

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

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

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

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

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

通過<el-form :model="arry">    與  <el-form-item :prop="'['+index+'].name"> 中的 model屬性值+prop屬性值組合："arry['"+index+'].name" 來確定數(shù)據(jù)訪問路徑。

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

優(yōu)化：

上面介紹的規(guī)則定義是放在<el-form-item>行內(nèi)定義的，在有些場景下，比如：一張大的填報報表，都是需要輸入大于0的數(shù)值的。

當(dāng)然上面的表單項(xiàng)本身是動態(tài)生成的，手寫規(guī)則的地方也不算多。

為了驗(yàn)證猜想，及優(yōu)化代碼。能不能定義一個規(guī)則函數(shù)，將這個函數(shù)設(shè)置給 :rules屬性。經(jīng)過實(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ī)則既滿足了動態(tài)表單的需求，也最大限度地減少代碼。

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

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

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

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

最后提交數(shù)據(jù)時，一般會調(diào)用表單對象的驗(yàn)證方法，這個方法會再對每個表單項(xiàng)進(jìn)行驗(yàn)證，如有未驗(yàn)證通過的，會依次觸發(fā)@validate事件，也就依次彈窗提示，體驗(yàn)不是很好。

可以只彈一次給個籠統(tǒng)點(diǎn)的提示，如：還有校驗(yàn)未通過的數(shù)據(jù)，請先修改。此時可以設(shè)置個開關(guān)量，當(dāng)個表單項(xiàng)輸入時可以開啟彈窗提示，提交表單時，就不用一個個提示了。

總結(jié)

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

最新評論