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

Posted on by

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！

推薦閱讀：