el-form表單el-form-item驗證規(guī)則里prop一次驗證兩個或多個值問題

更新時間：2023年05月20日 11:02:22 作者：Ypromise-

這篇文章主要介紹了el-form表單el-form-item驗證規(guī)則里prop一次驗證兩個或多個值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

el-form el-form-item驗證規(guī)則里prop一次驗證兩個或多個值

需求

要在表單的el-form-item 一次驗證兩個值，都不能為空

圖示：

下圖是圈起來的地方是我要驗證的第一個值

方法

在驗證規(guī)則rules里，要驗證的值里加上validator驗證規(guī)則，“valTowValue”是自己定義的。

緊接著在data下定義validator驗證規(guī)則。

如果一個el-form-item里要驗證多個，方法同理，在valTowValue里多判斷幾個就行了。

el-form表單驗證的一些方法總結

Form 組件提供了表單驗證的功能，只需要通過 rules 屬性傳入約定的驗證規(guī)則，并將 Form-Item 的 prop 屬性設置為需校驗的字段名即可。

前置知識點

根據文檔說明，model為表單的數據對象，el-form通過model綁定數據。
reles為表單驗證規(guī)則對象，其中字段名要與model中的字段名一一對應
el-form-item 容器，通過 label 綁定標簽，prop屬性設置為需要驗證的字段名
表單組件通過 v-model 綁定 model 中的數據

表單校驗相關屬性

hide-required-asterisk：是否隱藏必填字段的標簽旁邊的紅色星號（隱藏必錄標識）
inline-message：是否以行內形式展示校驗信息（驗證消息是否在一行顯示）

方式一（無表單嵌套）

以一般的form表單為例：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"?
class="demo-ruleForm">
? ? <el-form-item label="活動名稱" prop="name">?
? ? ? ? <el-input v-model="ruleForm.name"></el-input>?
? ? </el-form-item>
<el-form>

一般在vue中這樣來寫,就可以對表單進行驗證。

data(){
? ? return {
? ? ? ? ruleForm: { name: '' },
? ? ? ? rules: {
? ? ? ? ? ? name: [?
? ? ? ? ? ? ? ? { required: true, message: '請輸入活動名稱', trigger: 'blur' },?
? ? ? ? ? ? ? ? { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }?
? ? ? ? ? ? ]
? ? ? ? }
? ? }
},

如果有一些復雜的驗證規(guī)則，也可以選擇自定義驗證, validator

data() {
?const userValidator = (rule, value, callback) => {
? ? if (value.length > 3) {
? ? ? callback()
? ? } else {
? ? ? callback(new Error('用戶名長度必須大于3'))
? ? }
? }
? return {}
}
rules: {
? ? ? user: [
? ? ? ? { validator: userValidator, trigger: 'change' }
? ? ? ]
? ? }

方式二（表單嵌套）

嵌套的表單,一般業(yè)務場景是，有一些表單項需要按照條件顯示或者隱藏，data里面的model數據可能會是對象里面套對象的，el-form也同樣支持嵌套的驗證，寫法一般如下：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"?
class="demo-ruleForm">
? ? <el-form-item label="活動名稱">?
? ? ? ? <el-input v-model="ruleForm.name"></el-input>
? ? ? ? <el-form-item prop="info.name">?
? ? ? ? ? ? <el-input v-model="ruleForm1.info.name"></el-input>
? ? ? ? </el-form-item>
? ? </el-form-item>
<el-form>
data(){
? ? return {
? ? ? ? ? ?ruleForm: {
? ? ? ? ? ? ? ? info: {
? ? ? ? ? ? ? ? ? ? name: ''
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? }
}

rules里面同樣也可以這樣寫

rules: {
? ? ? info: {
? ? ? ? ? name: [{ required: true, message: '請選擇', trigger: 'change' }],
? ? ? }
? ? }

方式三（動態(tài)表單驗證）

除了在 Form 組件上一次性傳遞所有的驗證規(guī)則外還可以在單個的表單域上傳遞屬性的驗證規(guī)則.
動態(tài)添加form-item的時候，可以使用

<el-form-item prop="email" label="郵箱" :rules="[ { required: true, message: '請輸入郵箱地址', trigger: 'blur' }, { type: 'email', message: '請輸入正確的郵箱地址', trigger: ['blur', 'change'] } ]" > <el-input v-model="dynamicValidateForm.email"></el-input> </el-form-item>

方式四（動態(tài)添加校驗規(guī)則）

根據條件判斷是否需要某種驗證規(guī)則時，一個簡單的使用場景就是，通過不同的type去顯示不同的錯誤信息。

const message =
? ? ? this.type === 'addFirst'
? ? ? ? ? '請輸入一級名稱'
? ? ? ? : this.type === 'addChild'
? ? ? ? ? '請輸入二級名稱'
? ? ? ? : this.type === 'addThree' && this.editChannelItem
? ? ? ? ? '請選擇三級名稱'
? ? ? ? : '請輸入三級名稱';
? ? const validatorHandle = (rule, value, callback) => {
? ? ? if (value) {
? ? ? ? callback();
? ? ? } else {
? ? ? ? callback(new Error(message));
? ? ? }
? ? };
? ? const newRule = [...this.formInfoRules.name, { validator: validatorHandle, trigger: 'blur' }];
? ? this.formInfoRules = Object.assign({}, this.formInfoRules, { name: newRule });

方式五（手動控制校驗狀態(tài)）

error錯誤信息
validate-status驗證狀態(tài)。 success 驗證成功， error驗證失敗， validating驗證中，''未驗證

這樣使用：

<el-form-item
? ? ? ? ? ? ? ? :error="validateFormState.error"
? ? ? ? ? ? ? ? :validate-status="validateFormState.state"
? ? ? ? ? ? ? >
? ? ? ? ? ? </el-form-item>
? validateFormState = {
? ? periodSendDateError: '',
? ? periodSendDateStatus: 'success',
? };

在驗證成功或者失敗的時候去手動控制error和validate-status的值即可。