Vue Element-ui表單校驗規則，你掌握了哪些？

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屬性繫結該欄位規則，可參見：https://www.jianshu.com/p/e51107b57366。

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的方法程式碼中，也可以將各個校驗器的程式碼搬過來，不呼叫外部校驗器。

  下面為補充內容：

  上述的解決方案的不好之處，是沒有將規則附加屬性”userType“值繫結到data的form.formData.userType屬性上，沒法聯動，導致this.form.formData.userType修改之處，就需要設定。考慮到其它情況，如開始日期和結束日期的先後範圍校驗等情況，el-input或el-select的change事件來設定值帶來更多的程式碼開銷。因此，考慮了一下，現在有了新的方法，即規則附加屬性是一個函式方法，此方法可以返回this.form.formData.userType的最新值。

  程式碼如下：

      // methods下面，增加一個getUserTypeValue方法
      getUserTypeValue(){
        return this.form.formData.userType;
      },         

  data的rules的部分：

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

  直接配置了getValueFunc屬性，其值為getUserTypeValue方法。

  校驗器idFieldWithTypeValidator的程式碼更新為：

      // 不同型別情況下的ID欄位校驗器
      const idFieldWithTypeValidator = (rule, value, callback) =>{
        // 獲取獲取值的方法
        var getvalueMethod= rule.getValueFunc;
        // 呼叫方法，取得引數值，根據需要，可以返回任意型別資料，如物件，陣列等
        var userType = getvalueMethod();
        // console.log(userType);
        if (userType == 1){
          // 手機號碼
          phoneNoValidator(rule, value, callback);
        }else if(userType == 2){
          // 身份證號碼
          idNoValidator(rule, value, callback);
        }else if(userType == 3){
          // email
          eMailValidator(rule, value, callback);
        }
      }

  這樣，只要有一個函式方法來附加到規則中，根據需要，任意多個欄位聯合校驗都沒有問題，如getValueFunc返回n個屬性的物件，就可以支援n+1個屬性欄位的聯合校驗。

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。