Vue Element-ui表單校驗規則實現

Posted on 2021-07-09 by WalkonNet

1、前言

Element-ui表單校驗規則，使得錯誤提示可以直接在form-item下面顯示，無需彈出框，因此還是很好用的。

我在做瞭登錄頁面的表單校驗後，一度以為我已經很瞭解表單的校驗規則。但我在深入使用表單校驗規則時，遇到下列問題：

如何判斷屬性值是否在某個范圍內，且這個范圍可以任意指定？
如何判斷屬性值是否為某個值？
多個屬性聯合校驗，當前屬性的校驗規則依賴於另一個屬性的值，如何進行校驗？如註冊頁面，ID類型有郵箱地址、手機號和身份證號碼，選擇不同類型，IDValue屬性的校驗規則是不同，如何處理？
兩種模式，進入同一個表單組件，某些欄位可以不使用校驗規則，即rules的對象會有所不同。這種情況如何處理？

上述問題，讓我感覺幾乎成瞭小白。於是迫使我從頭開始研究校驗規則，查閱相關文檔。

本文分享一下對於表單校驗規則的心得體會。

2、規則校驗的入門模式

2.1、示例代碼

作為規則校驗的入門，以登錄頁面為例，代碼如下：

<template> 
  <div class="login-container">    
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="login-form">
      <h2 class="login-title">XX管理系統登錄</h2>
      <el-form-item label="用戶名：" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密  碼：" prop="password">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="驗證碼：" prop="verifyCode">
        <el-input v-model="form.verifyCode"></el-input>
        <div class="divVerifyCodeImg" @click="getVerifyCode(true)">
          <img id="verifyCodeImg" style="height:40px; width: 100px; cursor: pointer;" alt="點擊更換" title="點擊更換" />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" id="login" style="width:160px" @click="submitForm('form')">登錄</el-button>
      </el-form-item>
    </el-form>
  </div>  
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        verifyCode: "",
      },
      rules: {
        username: [
          {required: true, message: "用戶名不能為空", trigger: 'blur'},
        ],
        password: [
          {required: true, message: "密碼不能為空", trigger: 'blur'},
          {min: 6, max: 30, message: "密碼6-30位", trigger: 'blur'}
        ],
        verifyCode: [
          {required: true, message: "驗證碼不能為空", trigger: 'blur'},
        ]
      }      
    };   
  },
  methods: {
    // 提交登錄
    submitForm(formName) { 
      let _this = this;     
      // 執行校驗
      this.$refs[formName].validate(valid => {
        // 驗證通過為true，有一個不通過就是false
        if (valid) {
          // 通過校驗
          // 登錄處理
          // ....
        } else {
          // 沒通過校驗
          console.log('驗證失敗');
          return false;
        }
      });
    },
  }  
}
</script>

2.2、form項

form項，指明使用校驗規則：

 <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="login-form">

:rules=”rules” 指明瞭校驗規則使用rules規則對象，你也可以使用其它名稱，如rules1。

2.3、prop項

prop項，指明哪些字段可能使用校驗規則：

      <el-form-item label="用戶名：" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>

如果prop項指定的屬性值，如username，在rules中也有相應的項，則表示該屬性值執行規則校驗。這個屬性必須是form的model屬性綁定的數據對象的屬性，本例中為form，其在data中定義：

      form: {
        username: "",
        password: "",
        verifyCode: "",
      },

2.4、rules項

rules項，即校驗規則集，其在data中定義，其名稱必須與form的:rules屬性綁定的rules規則對象名一致。

      rules: {
        username: [
          {required: true, message: "用戶名不能為空", trigger: 'blur'},
        ],
        password: [
          {required: true, message: "密碼不能為空", trigger: 'blur'},
          {min: 6, max: 30, message: "密碼6-30位", trigger: 'blur'}
        ],
        verifyCode: [
          {required: true, message: "驗證碼不能為空", trigger: 'blur'},
        ]
      }

這是一個對象，每個元素的類型為：{屬性名：[rule]}，屬性名對於prop的屬性值。[rule]是一個規則數組，規則數組的每一項是一條對本屬性的校驗規則。

2.5、rule項

rule項，即規則數組的元素，這是本文要重點探討的項目。這裡先就上述rules的各元素項解析一下：

required：表示是否必須有值，取值為true/false，如為true，表示必須有值，如果無值，則校驗不通過；如為false，則允許無值，但在有值的情況下，不影響其它規則的使用。
message：提示消息，在校驗不通過時提示此消息。
trigger：觸發方式，取值為blur/change，blue表示失去焦點，一般在input組件中使用；change為值改變，一般在選擇框中使用。
min：字符串最小長度。
max：字符串最大長度。

有瞭這些解釋，不難理解上述rules定義的各屬性的校驗規則。

2.6、使用規則

this.$refs[‘form'].validate(valid => {
        // 驗證通過為true，有一個不通過就是false
        if (valid) {
          // 通過校驗
        } else {
          // 沒通過校驗
        }
      });

這個validate方法，要求所有校驗規則都通過，才放行。其中，$refs[‘form’]，指向form的ref屬性值。

2.7、規則校驗的核心

規則校驗的核心為為async-validator插件，官網：https://github.com/yiminghe/async-validator。

Element-UI使用瞭該插件，並進行瞭封裝。官網：https://element.eleme.cn/#/zh-CN/component/form。

因此兩邊的資料都會有幫助。

3、規則校驗的進階模式

3.1、嵌套對象屬性名

有時候，prop不是一個簡單的屬性，而是包在其它對象下的屬性。如：

      <el-form-item label="登 錄 名：" prop="formData.loginName">
        <el-input v-model="form.formData.loginName" :disabled="form.formData.userId != 0"></el-input>
      </el-form-item>

form的model綁定的form對象，其形式為：

        form:{
          // form數據字段，為提交後端方便，建議與UserInfo字段命名一致
          formData    : {
            userId      : 0,
            loginName   : '',
            passwd      : '',
            // ...
          },

          // 用戶類型選擇框當前顯示值
          userTypeLabel : "",
          // ...
        },

此時，rules的元素定義，不能用下列形式：

        formData.loginName: [
          {required: true, message: "登錄名不能為空", trigger: 'blur'},
        ],

這樣，編譯會報錯！

應使用下列形式：

    'formData.loginName': [
      {required: true, message: "登錄名不能為空", trigger: 'blur'},
    ],

即用單引號或雙引號將之包起來，變成一個字符串。

3.2、自定義校驗器validator

關於自定義校驗器validator，網上的相關資料很多，如常用正則檢查的validator。

規則定義方法：

          'formData.loginName': [
            {required: true, message: "登錄名不能為空", trigger: 'blur'},
            {validator:loginNameValidator, trigger: 'blur'}
          ],

表示’formData.loginName’屬性使用瞭loginNameValidator的校驗器。考慮到代碼的復用，一般將自定義的校驗器獨成瞭js文件，便於其它頁面或項目使用。

在/src/common/目錄下，創建validator.js文件，代碼如下：

/* 登錄名校驗 */
export function loginNameValidator(rule, value, callback){
  const reg= /^[a-zA-Z][\w-. @]*$/;
  if(value == '' || value == undefined || value == null){
    callback();
  }else {  
    if (!reg.test(value)){
      callback(new Error('要求為：英文字母開頭，後續為字母數字及_-. @符號'));
    }else {
      callback();
    }
  }
}

在vue文件中導入此validator.js文件：

import {loginNameValidator} from '@/common/validator.js'

如果需導入多個外部校驗器，則在{}中包含多個，如{loginNameValidator,passwordValidator}。

這裡有個小坑，稍微提一句。

根據目錄結構，我先使用下列語句：

import {loginNameValidator} from '../../../common/validator.js'

結果，編譯錯誤，說找不到’../../../common/validator.js’文件，於是各種路徑表示方法嘗試，均告失敗。最後還是使用改用@通過瞭，因為/bulid/webpack.base.conf.js中配置瞭alias，指示@表示src目錄。

回到自定義validator，其形式為：

function ValidatorFuncName(rule, value, callback)

方法名，隨意指定。

實際上，其完整形式為：

function ValidatorFuncName(rule, value, callback, source, options)

參數含義如下：

rule：指向規則的對象，可以在方法代碼中，加入第一句：

console.log(rule);

可將rule參數打印出來看，就是本條規則的對象數據。

value：屬性的值，該值為需要校驗的值。

callback：指向校驗結束的回調函數，如果校驗通過，調用callback()，如果未通過，一般使用下列形式：

callback(new Error(‘具體的提示信息’));
或帶參數的提示：

return callback(new Error(`${rule.field} must be lowercase alphanumeric characters`));

註意，字符串格式化，不是使用單引號括起來，而是用“~”符號括起來。

也可以使用async-validator官網(https://github.com/yiminghe/async-validator)的方法：

util.format('%s must be lowercase alphanumeric characters', rule.field),

util文件中包含format方法，這個util.ts文件，在官網的src/目錄下，這是個ts文件，可以類似做一個公共方法。

實際上，可以返回一個Error的數組，即errors，如：

      const errors = [];
      errors.push(new Error('要求為：英文字母開頭，後續為字母數字及_-. @符號'));
      errors.push(new Error('3444要求為：英文'));
      return callback(errors);

但從實際效果看，表單隻顯示瞭第一行的提示，估計Element的表單不支持顯示多行錯誤信息。

source：為調用校驗的屬性對象，可以打印出來看一下。
options，附加參數，主要是預定義的消息格式，也可以打印出來看一下。

更復雜的校驗器，可以攜帶參數，如：

// 整數范圍值校驗
export const intRangeValidator = (min, max) => (rule, value, callback) => {
  var isInRange = (value >= min) && (value <= max);
  const reg = /^-?\d+$/;
  var isInt = reg.test(value);
  if (isInRange && isInt){
    return callback();
  }else{
    return callback(new Error(`要求是在${min}到${max}的整數 [${min}, ${max}]`));
  }
}

使用方法：

      'formData.age': [
        {validator: intRangeValidator(1,100), trigger: 'blur'}
      ],

表示，formData.age屬性的取值范圍為1-100的整數。

自定義校驗器validator提供瞭自由發揮的空間，可以使用正則匹配、數值計算和比較等運算等，進行復雜的校驗，因此比較常用。但用自定義校驗器validator，有時會顯得過於繁瑣。

自定義校驗器validator不一定要放置在外部文件中，也可以放置vue文件中。

放置在data中，但不被return所包括的位置，尾部沒有逗號。

const loginNameValidator = (rule, value, callback) => {
  const reg= /^[a-zA-Z][\w-. @]*$/;
  if(value == '' || value == undefined || value == null){
    callback();
  }else {  
    if (!reg.test(value)){
      callback(new Error('要求為：英文字母開頭，後續為字母數字及_-. @符號'));
    }else {
      callback();
    }
  }
}

或直接在規則中定義：

          'formData.loginName': [
            {required: true, message: "登錄名不能為空", trigger: 'blur'},
            {validator(rule, value, callback){
              const reg= /^[a-zA-Z][\w-. @]*$/;
              if(value == '' || value == undefined || value == null){
                callback();
              }else {  
                if (!reg.test(value)){
                  callback(new Error('要求為：英文字母開頭，後續為字母數字及_-. @符號'));
                }else {
                  callback();
                }
              }                
            }, 
             trigger: 'blur'}
          ],

3.3、類型type

類型type的基本用法如下：

      'formData.age': [
        {type: 'integer',message: "值要求為整數",trigger: 'blur'},
      ],

類型也是一個規則項，如不符合類型要求，則提示錯誤信息。

規則支持的類型如下：

string，字符串類型，這是默認類型。如不指定type，默認就是string。
number，數字類型。包括整數和小數。
integer，整數類型。
float，浮點數類型，此時不能為整數，必須有小數點。
boolean，佈爾類型，true/false值。
array，數組類型。
object，對象類型，不能為數組。
enum，枚舉類型，然後需要聲明該枚舉類型。
method，函數（或方法）類型。
regexp，正則類型，必須是一個合法的正則表達式，可以通過new RegExp來創建。
date，日期類型，值必須可以轉為有效日期值。
url，url類型，值需要符合url格式。
email，email類型，符合郵箱格式格式。
hex，16進制表示的形式。如0xFF12。
any，任意類型，不限制。

這裡的url和email類型，可以直接用於相關含義的屬性校驗，如：

          'formData.email': [
            {type: 'email', message: "必須符合郵箱地址格式",trigger: 'blur'}
          ],

日期類型也比較有用，這些內置類型，使得我們可以不必通過自定義校驗器validator來處理。

對於數值類型（number，integer，float）以及boolean型，由於input輸入的都為字符串，因此必須進行類型轉換，否則校驗通不過。這裡涉及到transform的用法。

3.3、數據轉換transform

transform是一個鉤子函數，在開始驗證之前可以對數據先處理後驗證。如下面示例：

      'formData.age': [
        {
            type: 'integer',
            message: "值要求為整數",
            trigger: 'blur',
            transform(value){return parseInt(value);},
        },
      ],

經過transform類型轉化後，formData.age屬性的校驗規則就能正常使用瞭，否則總是通不過類型校驗。（這裡實際上有點問題，如允許輸出12ab這種形式的值，parseInt得到值為12）

對於類型轉換，transform還有更簡潔而嚴格的表述：

  'formData.age': [
    {
        type:'integer',
        message: "值要求為整數",
        trigger: 'blur',
        transform：Number},
    },
  ],

表示轉換為數字類型，這樣就行瞭。值為1.2或12ab都不能通過校驗。

transform除瞭類型轉換外，還可以進行其它處理，如：

          'formData.age': [
            {type : 'string',pattern:/1/,message: "值要求為1-100的數",transform(value){return parseInt(value)>=1 && parseInt(value)<=100 ? "1" : "0";},}
          ],

等於某個值：

          'formData.age': [
            {type : 'string',pattern:/1/,message: "值要求必須為50",transform(value){return value == "50" ? "1" : "0";},}
          ],

不等於某個值：

      'formData.age': [
        {type : 'string',pattern:/0/,message: "值要求不能為50",transform(value){return value == "50" ? "1" : "0";},}
      ],

3.4、數值范圍Range

Range不是規則的屬性字段，其通過min和max屬性來體現。

如果類型type為string或array，則min和max表示長度。

如果類型type為數值類型（number，integer，float），則min和max表示值的范圍。如：

  'formData.age': [
    {
        type:'integer',
        message: "值要求為1-100的整數",
        min: 1,
        max:100,
        trigger:'blur',
        transform:Number,
    },
  ],

這樣，范圍校驗直接可使用規則的內置屬性，在規則中進行描述，也無需用intRangeValidator校驗器和正則匹配方式瞭。

3.5、枚舉值

枚舉值類型的用法示例：

          'formData.idType': [
            {
                type: 'enum', enum: [2,4,6], message: `結果不存在`, trigger: ['change', 'blur'], transform(value) {return Number(value) * 2},
            },
          ],  
  或：

      'formData.gender': [
        {
            type: 'enum', enum: ['male','female'], message: `結果不存在`, trigger: ['change', 'blur'],
        },
      ],

使用有下列問題：

反應比較遲鈍，就是一開始幾次輸入，沒有校驗，一旦有校驗瞭，後面都就可以瞭。
對於後一種情況，即范圍為字符串的集合，校驗正常。對於前一種情況，即范圍為整數型的，0也通過校驗瞭，導致任意字符串也通過校驗瞭，這是一個bug。

因此，也可以利用字符串枚舉值，來校驗范圍：

          'formData.age': [
            {
                type : 'enum',
                enum:["1"],
                message: "值要求為1-100的數",
                transform(value){
                    if (!isNaN(value)){
                      return parseInt(value)>=1 && parseInt(value)<=100 ? "1" : "0";
                    }else{
                      return "0";
                    }
               }
            },
          ],

註意：此時1e3，9e811被認為是通過校驗瞭，因為parseInt函數隻取e前面的數字，而isNaN認為是數字。看來還是需要與正則規則配合才行。

3.6、正則Pattern

pattern屬性，就是正則表達式匹配校驗規則，如：

          'formData.loginName': [
            {required: true, message: "登錄名不能為空", trigger: 'blur'},
            {pattern:/^[a-zA-Z][\w-. @]*$/,
             message:'要求為：英文字母開頭，後續為字母數字及_-. @符號',
             trigger: 'blur'}
          ],

效果與之前的loginNameValidator校驗器相同，區別在於loginNameValidator可以復用，保持一個正則校驗，如需修改，隻需改動一處。而使用pattern則不然。但使用pattern可以少寫自定義校驗器，給瞭用戶一個選擇。

使用pattern屬性，可以進行等於某個值某個值的校驗。

等於某個值：

{pattern:/120/,message:'必須必須為120',trigger: 'blur'}

關於js正則表達式，可先用js正則表達式在線測試工具測試一下，檢查是否達到預期效果。js正則表達式在線測試地址：https://c.runoob.com/front-end/854。

3.7、長度len

len屬性，如果類型為string或array，則冷表示長度。如果為數字型，則表示數字值就是len屬性值。

len屬性與min、max屬性同時出現瞭，len屬性有更高的優先級。

len屬性，可用於格式化的字符串校驗，如身份證號碼長度。

len也可用於等於某個數值的校驗，如：

  'formData.age': [
    {
        type:'integer',
        message: "值要求必須為6周歲",
        len: 6,
        trigger:'blur',
        transform:Number,
    },
  ],

3.8、空白whitespace

空白表示全部由空格組成的字符串，規則的類型必須為string。如果匹配規則，則告警提示。如：

          'formData.email': [
             {whitespace: true, message: '隻存在空格', trigger: 'blur'}
          ],

值為空格，會提示告警。

如果不希望空格幹擾校驗，可用transform來處理：

transform(value) { return value.trim();}

3.9、i18n

message支持i18n，即國際化處理，如集成vue-i18n，message屬性的用法如下：

message: () => this.$t( 'about' )

中文語言顯示“關於”，英文語言顯示“about”。

當然，你也可以換成任意的其它函數，如：

message: () => this.myMessageHandler(MessageId,paramValues)

4、規則校驗的高級模式

4.1、異步校驗器asyncValidator

異步校驗器用於遠程訪問，利用ajax或axios請求數據，對響應數據進行校驗或對異常進行提示。

本地頁面校驗，屬於串行校驗，逐個檢查各字段的校驗規則，遇到未通過即返回校驗失敗。

遠程校驗，為異步校驗，多個請求，響應時間各有不同，響應的先後次序就無法預知。

異步校驗的作用：可以將前端和後端針對相同屬性字段，使用相同的校驗規則，統一由後端提供校驗。但這同樣增加瞭前後端溝通和一致性維護的成本。

目前暫時未用到異步校驗器，這裡用官網的示例：

asyncField1:{asyncValidator: myAsyncValidator}
  myAsyncValidator可類似validator位置放置。假設放置在data中。

const myAsyncValidator = (rule, value, callback) => {
      ajax({
        url: 'xx',
        value: value,
      }).then(function(data) {
        callback();
      }, function(error) {
        callback(new Error(error));
      });
    }

Promise異步字段校驗：

 const myAsyncValidator = (rule, value) => {
      return ajax({
        url: 'xx',
        value: value,
      });
    }

區別在於Promise異步字段校驗，需要使用者自己寫上.then/.catch處理邏輯，不支持回調。

異步校驗，還涉及到Options屬性，

options: { first: true },

first為true，表示多個異步校驗遇到第一校驗失敗就不再處理其它異步校驗。

4.2、深層規則Deep rules

對於對象Object或數組Array的校驗，需要具體到每一個元素（成員），這裡就要用到Deep rules。

Deep rules涉及到fields和defaultField兩個屬性。

如官網示例（按照習慣形式略作修改）：

對象的深層校驗：

rules : {
  address: [{
    type: 'object',
    required: true,
    options: { first: true },
    fields: {
      street: [{ type: 'string', required: true }],
      city: [{ type: 'string', required: true }],
      zip: [{ type: 'string', required: true, len: 8, message: 'invalid zip' }],
    },
  }],
  name: [{ type: 'string', required: true }],
};

數組的深層校驗：

rules : {
  roles: [{
    type: 'array',
    required: true,
    len: 3,
    fields: {
      0: [{ type: 'string', required: true }],
      1: [{ type: 'string', required: true }],
      2: [{ type: 'string', required: true }],
    },
  }],
};

數組的深層校驗，看起來比較傻，每個成員都要設置校驗規則，對於動態數組，似乎也不知該如何設置。

defaultField屬性，使我們對字段校驗規則有瞭統一設置的手段。此屬性可以作用在校驗屬性字段上，也可以作用在fields上。

例如：

rules : {
  urls: [{
    type: 'array',
    required: true,
    defaultField: { type: 'url' },
  }],
};

如果是對象數組，該如何設置？可如下方式：

rules : {
  persons: [{
    type: 'array',
    required: true,
    defaultField:{
        type: 'object',
        required: true,
        fields: {
            address: [{
                type: 'object',
                required: true,
                fields: {
                    street: [{ type: 'string', required: true }],
                    city: [{ type: 'string', required: true }],
                    zip: [{ type: 'string', required: true, len: 8, 
                           message: 'invalid zip' }],
                },
            }],
            name: [{ type: 'string', required: true }],                  
        }
    }
  }],
};

數組套對象，對象套子對象，看起來有點復雜。

4.3、動態規則集

有時候不同模式進入表單，需要應用不同的規則。如新增和編輯操作，顯示同一個頁面組件。但此時對頁面需要校驗的屬性字段有所不同，如何設置？

有兩個處理方案。方案1是配置兩套規則集，根據不同模式進行切換；方案2是配置總的規則集，根據不同模式抽取合適的屬性字段和規則，動態構建規則集。

4.3.1、切換校驗規則集

切換校驗規則集，示例代碼如下：

      // data 部分
      // 當前規則集
      rules:{},
      // 模式1規則集
      rules1:{
         ...
      },
      // 模式2規則集
      rules2:{
          ...
      },

      // methods部分
      // 動態切換
      // 頁面初始化
      init(obj,data){
        this.prevForm = obj;

        // 設置頁面可見
        this.visible = true;

        // DOM更新之後執行
        this.$nextTick(()=>{
          // 重置當前頁面的所有字段值
          this.$refs['form'].resetFields();

          if (data){
            // 模式1
            this.form.patternType = 1;        
          }else{
            // 模式2
            this.form.patternType = 2;
          }        
          // 設置校驗規則
          this.setValidRules(this.form.patternType);
        }
    },
      setValidRules(patternType){
        if(patternType == 1){
            this.rules = this.rules1;
        }else if(patternType == 2){
            this.rules = this.rules2;
        }
      },

這樣，根據不同模式，切換瞭校驗規則集。為瞭切換規則時，立即執行規則校驗，需要設置el-form的validate-on-rule-change為false，即：

<el-form ref="form" :model="form" :rules="rules" 
         :validate-on-rule-change=false 
         class="useredit" label-width="100px" style="line-height: 30px;">

4.3.2、動態構建校驗規則集

動態構建校驗規則集，示例代碼如下：

      // data 部分
      // 當前規則集
      rules:{},
      // 規則全集
      allRules:{
          'formData.loginName': [
            {required: true, message: "登錄名不能為空", trigger: 'blur'},
            {validator:loginNameValidator, trigger: 'blur'}
          ],
          'formData.passwd': [
            {required: true, message: "密碼不能為空", trigger: 'blur'},
            {min: 6, max: 18, message: "密碼6-18位", trigger: 'blur'}
          ],
          'formData.email': [
             {type: 'email', message: '需要符合email格式', trigger: 'blur'}
          ],          
          genderLabel: [
            {required: true, message: "性別不能為空", trigger: 'change'},
          ],
          userTypeLabel : [
            {required: true, message: "用戶類型不能為空", trigger: 'change'},
          ],
          deptLabel: [
            {required: true, message: "部門不能為空", trigger: 'change'},
          ]
      },
          
      // methods部分
      // 動態切換
      // 頁面初始化
      init(obj,data){
        this.prevForm = obj;

        // 設置頁面可見
        this.visible = true;

        // DOM更新之後執行
        this.$nextTick(()=>{
          // 重置當前頁面的所有字段值
          this.$refs['form'].resetFields();

          if (data){
            // 模式1
            this.form.patternType = 1;        
          }else{
            // 模式2
            this.form.patternType = 2;
          }        
          // 設置校驗規則
          this.setValidRules(this.form.patternType);
        }
    },
      setValidRules(patternType){
        if (patternType == 1){
          // 模式1
          // 先清空，再設置          
          this.rules = {};
          this.rules['genderLabel'] = this.allRules['genderLabel'];
          this.rules['userTypeLabel'] = this.allRules['userTypeLabel'];
          this.rules['deptLabel'] = this.allRules['deptLabel'];
          this.rules['formData.email'] = this.allRules['formData.email'];
        } else{
          // 模式2，需要驗證登錄名和密碼
          this.rules = {};
          this.rules['formData.loginName'] = this.allRules['formData.loginName'];
          this.rules['formData.passwd'] = this.allRules['formData.passwd'];
          this.rules['genderLabel'] = this.allRules['genderLabel'];
          this.rules['userTypeLabel'] = this.allRules['userTypeLabel'];
          this.rules['deptLabel'] = this.allRules['deptLabel'];
          this.rules['formData.email'] = this.allRules['formData.email'];
        }
      },

同樣也需要設置el-form的validate-on-rule-change為false。

4.4、動態表格字段校驗

有的表單，使用瞭可編輯的動態表格，如添加一數據行，直接在數據行中輸入數據，然後提交。此時需要對數據行各字段的輸入進行校驗。

有2個方案。

方案1使用Deep rules的defaultField，對對象數組進行字段校驗，見上面的示例代碼。

方案2，在el-form-item層級使用rules屬性綁定該字段規則。

4.5、多字段聯合校驗

多字段聯合校驗應用場合還是比較常見的，如文本開始的問題，不同ID類型，有不同的校驗規則；如密碼驗證，兩次密碼要相同；如購買數量不能超過庫存數量，時間段開始時間要不大於結束時間，等等。

關鍵技巧，利用校驗器的第一個參數rule，添加一個或若幹個自定義屬性，傳遞信息到校驗器進行處理。使用方法如下：

作為示例，假設’formData.email’字段校驗依賴於userType的值。

          'formData.email': [            
             {validator : idFieldWithTypeValidator, trigger: 'blur',}
          ],

沒有辦法初始綁定：

          'formData.email': [            
             {validator : idFieldWithTypeValidator, trigger: 'blur','userType':this.form.formData.userype}
          ],

這樣寫，瀏覽器調試器顯示錯誤，提示調用resetFields出錯。

因此，正確的形式為：

      'formData.email': [            
         {validator : idFieldWithTypeValidator, trigger: 'blur',}
      ],

或：

      'formData.email': [            
         {validator : idFieldWithTypeValidator, trigger: 'blur','userType':0}
      ],

然後，在頁面初始化時，或選擇框選擇改變的chage事件方法中，動態設置規則中userType屬性的值：

this.rules['formData.email'][0]['userType'] = this.form.formData.userType;

試驗結果，用$set沒法動態綁定，即下列語句沒有作用：

this.$set(this.allRules['formData.email'][0],'userType',this.form.formData.userType);

好瞭，現在可以編寫一個聯合校驗器idFieldWithTypeValidator瞭。簡單起見，在data部分編寫：

      const idFieldWithTypeValidator = (rule, value, callback) =>{
        // 獲取用戶類型
        console.log(rule);
        return callback();
      }

測試一下，在瀏覽器控制臺輸出rule的打印信息如下：

{
    "userType": 2,
    "field": "formData.email",
    "fullField": "formData.email",
    "type": "string"
}

此時，userType已經通過rule參數傳入，現在可以進行聯合校驗瞭。

  import {loginNameValidator,phoneNoValidator,idNoValidator,eMailValidator} from '@/common/validator.js'
  export default {
    data() {
      // 不同類型情況下的ID字段校驗器
      const idFieldWithTypeValidator = (rule, value, callback) =>{
        // 獲取用戶類型
        console.log(rule);
        if (rule.userType == 1){
          // 手機號碼
          phoneNoValidator(rule, value, callback);
        }else if(rule.userType == 2){
          // 身份證號碼
          idNoValidator(rule, value, callback);
        }else if(rule.userType == 3){
          // email
          eMailValidator(rule, value, callback);
        }
      }

      return {
          ....
      }            
    },
    ...
  }

其中phoneNoValidator、idNoValidator、eMailValidator分別是手機號碼校驗器、身份證號碼校驗器、郵箱格式校驗器，由validator.js中輸出，idFieldWithTypeValidator校驗器根據userType參數的取值不同，分別調用瞭相關的validator類型的校驗器。當然，在idFieldWithTypeValidator的方法代碼中，也可以將各個校驗器的代碼搬過來，不調用外部校驗器。

5、參考文章

除瞭官網資料外，本文還參考瞭下列文章：

[1]、淺析async-validator源碼，https://zhuanlan.zhihu.com/p/32306570?edition=yidianzixun&utm_source=yidianzixun&yidian_docid=0I5IikUl。

[2]、Vue中Element表單驗證的基本要素， https://www.php.cn/js-tutorial-406545.html。

[3]、element-ui 表單校驗 Rules 配置，https://www.cnblogs.com/loveyt/archive/2020/07/11/13282518.html。

[4]、Element Ui使用技巧——Form表單的校驗規則rules詳細說明，https://www.cnblogs.com/xyyt/p/13366812.html

到此這篇關於Vue Element-ui表單校驗規則實現的文章就介紹到這瞭,更多相關Element表單校驗規則內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

Vue Element-ui表單校驗規則實現

目錄

1、前言

2、規則校驗的入門模式

2.1、示例代碼

2.2、form項

2.3、prop項

2.4、rules項

2.5、rule項

2.6、使用規則

2.7、規則校驗的核心

3、規則校驗的進階模式

3.1、嵌套對象屬性名

3.2、自定義校驗器validator

3.3、類型type

3.3、數據轉換transform

3.4、數值范圍Range

3.5、枚舉值

3.6、正則Pattern

3.7、長度len

3.8、空白whitespace

3.9、i18n

4、規則校驗的高級模式

4.1、異步校驗器asyncValidator

4.2、深層規則Deep rules

4.3、動態規則集

4.3.1、切換校驗規則集

4.3.2、動態構建校驗規則集

4.4、動態表格字段校驗

4.5、多字段聯合校驗

5、參考文章

推薦閱讀：

發佈留言取消回覆

近期文章

目錄

1、前言

2、規則校驗的入門模式

2.1、示例代碼

2.2、form項

2.3、prop項

2.4、rules項

2.5、rule項

2.6、使用規則

2.7、規則校驗的核心

3、規則校驗的進階模式

3.1、嵌套對象屬性名

3.2、自定義校驗器validator

3.3、類型type

3.3、數據轉換transform

3.4、數值范圍Range

3.5、枚舉值

3.6、正則Pattern

3.7、長度len

3.8、空白whitespace

3.9、i18n

4、規則校驗的高級模式

4.1、異步校驗器asyncValidator

4.2、深層規則Deep rules

4.3、動態規則集

4.3.1、切換校驗規則集

4.3.2、動態構建校驗規則集

4.4、動態表格字段校驗

4.5、多字段聯合校驗

5、參考文章

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆