快捷導(dǎo)航

el-form表單驗(yàn)證的一些實(shí)用方法總結(jié)

更新時(shí)間：2023年01月04日 10:26:08 作者：jiahao778

表單校驗(yàn)是注冊(cè)環(huán)節(jié)中必不可少的操作,表單校驗(yàn)通過一定的規(guī)則來確保用戶提交數(shù)據(jù)的有效性,下面這篇文章主要給大家介紹了關(guān)于el-form表單驗(yàn)證的一些實(shí)用方法,需要的朋友可以參考下

前言
前置知識(shí)點(diǎn)
表單校驗(yàn)相關(guān)屬性
方式一（無表單嵌套）
方式二（表單嵌套）
方式三（動(dòng)態(tài)表單驗(yàn)證）
方式四（動(dòng)態(tài)添加校驗(yàn)規(guī)則）
方式五（手動(dòng)控制校驗(yàn)狀態(tài)）
總結(jié)

前言

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

前置知識(shí)點(diǎn)

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

表單校驗(yàn)相關(guān)屬性

hide-required-asterisk：是否隱藏必填字段的標(biāo)簽旁邊的紅色星號(hào)（隱藏必錄標(biāo)識(shí)）
inline-message：是否以行內(nèi)形式展示校驗(yàn)信息（驗(yàn)證消息是否在一行顯示）

方式一（無表單嵌套）

以一般的form表單為例：

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

一般在vue中這樣來寫,就可以對(duì)表單進(jìn)行驗(yàn)證。

data(){
    return {
        ruleForm: { name: '' },
        rules: {
            name: [ 
                { required: true, message: '請(qǐng)輸入活動(dòng)名稱', trigger: 'blur' }, 
                { min: 3, max: 5, message: '長(zhǎng)度在 3 到 5 個(gè)字符', trigger: 'blur' } 
            ]
        }
    }
},

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

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

方式二（表單嵌套）

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

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" 
class="demo-ruleForm">
    <el-form-item label="活動(dòng)名稱"> 
        <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: '請(qǐng)選擇', trigger: 'change' }],
      }
    }

方式三（動(dòng)態(tài)表單驗(yàn)證）

除了在 Form 組件上一次性傳遞所有的驗(yàn)證規(guī)則外還可以在單個(gè)的表單域上傳遞屬性的驗(yàn)證規(guī)則.

動(dòng)態(tài)添加form-item的時(shí)候，可以使用

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

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

根據(jù)條件判斷是否需要某種驗(yàn)證規(guī)則時(shí)，一個(gè)簡(jiǎn)單的使用場(chǎng)景就是，通過不同的type去顯示不同的錯(cuò)誤信息。

const message =
      this.type === 'addFirst'
        ? '請(qǐng)輸入一級(jí)名稱'
        : this.type === 'addChild'
        ? '請(qǐng)輸入二級(jí)名稱'
        : this.type === 'addThree' && this.editChannelItem
        ? '請(qǐng)選擇三級(jí)名稱'
        : '請(qǐng)輸入三級(jí)名稱';
    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 });

方式五（手動(dòng)控制校驗(yàn)狀態(tài)）

error錯(cuò)誤信息

validate-status驗(yàn)證狀態(tài)。 success 驗(yàn)證成功， error驗(yàn)證失敗， validating驗(yàn)證中，''未驗(yàn)證
這樣使用：

<el-form-item
           
                :error="validateFormState.error"
                :validate-status="validateFormState.state"
              >
            </el-form-item>
            
  validateFormState = {
    periodSendDateError: '',
    periodSendDateStatus: 'success',
  };
  在驗(yàn)證成功或者失敗的時(shí)候去手動(dòng)控制error和validate-status的值即可。