1、前言

??Element-ui表單校驗(yàn)規(guī)則，使得錯(cuò)誤提示可以直接在form-item下面顯示，無(wú)需彈出框，因此還是很好用的。

??我在做了登錄頁(yè)面的表單校驗(yàn)后，一度以為我已經(jīng)很了解表單的校驗(yàn)規(guī)則。但我在深入使用表單校驗(yàn)規(guī)則時(shí)，遇到下列問(wèn)題：

• 如何判斷屬性值是否在某個(gè)范圍內(nèi)，且這個(gè)范圍可以任意指定？

• 如何判斷屬性值是否為某個(gè)值？

• 多個(gè)屬性聯(lián)合校驗(yàn)，當(dāng)前屬性的校驗(yàn)規(guī)則依賴于另一個(gè)屬性的值，如何進(jìn)行校驗(yàn)？如注冊(cè)頁(yè)面，ID類型有郵箱地址、手機(jī)號(hào)和身份證號(hào)碼，選擇不同類型，IDValue屬性的校驗(yàn)規(guī)則是不同，如何處理？

• 兩種模式，進(jìn)入同一個(gè)表單組件，某些欄位可以不使用校驗(yàn)規(guī)則，即rules的對(duì)象會(huì)有所不同。這種情況如何處理？

??上述問(wèn)題，讓我感覺(jué)幾乎成了小白。于是迫使我從頭開始研究校驗(yàn)規(guī)則，查閱相關(guān)文檔。

??本文分享一下對(duì)于表單校驗(yàn)規(guī)則的心得體會(huì)。

2、規(guī)則校驗(yàn)的入門模式

2.1、示例代碼

??作為規(guī)則校驗(yàn)的入門，以登錄頁(yè)面為例，代碼如下：

<template> 
  <div class="login-container">    
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="login-form">
      <h2 class="login-title">XX管理系統(tǒng)登錄</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="驗(yàn)證碼：" 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="點(diǎn)擊更換" title="點(diǎn)擊更換" />
        </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: "驗(yàn)證碼不能為空", trigger: 'blur'},
        ]
      }      
    };   
  },
  methods: {
    // 提交登錄
    submitForm(formName) { 
      let _this = this;     
      // 執(zhí)行校驗(yàn)
      this.$refs[formName].validate(valid => {
        // 驗(yàn)證通過(guò)為true，有一個(gè)不通過(guò)就是false
        if (valid) {
          // 通過(guò)校驗(yàn)
          // 登錄處理
          // ....
        } else {
          // 沒(méi)通過(guò)校驗(yàn)
          console.log('驗(yàn)證失敗');
          return false;
        }
      });
    },
  }  
}
</script>

2.2、form項(xiàng)

??form項(xiàng)，指明使用校驗(yàn)規(guī)則：

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

??:rules="rules" 指明了校驗(yàn)規(guī)則使用rules規(guī)則對(duì)象，你也可以使用其它名稱，如rules1。

2.3、prop項(xiàng)

??prop項(xiàng)，指明哪些字段可能使用校驗(yàn)規(guī)則：

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

??如果prop項(xiàng)指定的屬性值，如username，在rules中也有相應(yīng)的項(xiàng)，則表示該屬性值執(zhí)行規(guī)則校驗(yàn)。這個(gè)屬性必須是form的model屬性綁定的數(shù)據(jù)對(duì)象的屬性，本例中為form，其在data中定義：

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

2.4、rules項(xiàng)

??rules項(xiàng)，即校驗(yàn)規(guī)則集，其在data中定義，其名稱必須與form的:rules屬性綁定的rules規(guī)則對(duì)象名一致。

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: "驗(yàn)證碼不能為空", trigger: 'blur'},
        ]
      }      

??這是一個(gè)對(duì)象，每個(gè)元素的類型為：{屬性名：[rule]}，屬性名對(duì)于prop的屬性值。[rule]是一個(gè)規(guī)則數(shù)組，規(guī)則數(shù)組的每一項(xiàng)是一條對(duì)本屬性的校驗(yàn)規(guī)則。

2.5、rule項(xiàng)

??rule項(xiàng)，即規(guī)則數(shù)組的元素，這是本文要重點(diǎn)探討的項(xiàng)目。這里先就上述rules的各元素項(xiàng)解析一下：

• required：表示是否必須有值，取值為true/false，如為true，表示必須有值，如果無(wú)值，則校驗(yàn)不通過(guò)；如為false，則允許無(wú)值，但在有值的情況下，不影響其它規(guī)則的使用。

• message：提示消息，在校驗(yàn)不通過(guò)時(shí)提示此消息。

• trigger：觸發(fā)方式，取值為blur/change，blue表示失去焦點(diǎn)，一般在input組件中使用；change為值改變，一般在選擇框中使用。

• min：字符串最小長(zhǎng)度。

• max：字符串最大長(zhǎng)度。

??有了這些解釋，不難理解上述rules定義的各屬性的校驗(yàn)規(guī)則。

2.6、使用規(guī)則

this.$refs[‘form’].validate(valid => {
        // 驗(yàn)證通過(guò)為true，有一個(gè)不通過(guò)就是falseif (valid) {
          // 通過(guò)校驗(yàn)
        } else {
          // 沒(méi)通過(guò)校驗(yàn)
        }
      });

??這個(gè)validate方法，要求所有校驗(yàn)規(guī)則都通過(guò)，才放行。其中，$refs[‘form’]，指向form的ref屬性值。

2.7、規(guī)則校驗(yàn)的核心

??規(guī)則校驗(yàn)的核心為為async-validator插件，官網(wǎng)：https://github.com/yiminghe/async-validator。

??Element-UI使用了該插件，并進(jìn)行了封裝。官網(wǎng)：https://element.eleme.cn/#/zh-CN/component/form。

??因此兩邊的資料都會(huì)有幫助。

3、規(guī)則校驗(yàn)的進(jìn)階模式

3.1、嵌套對(duì)象屬性名

??有時(shí)候，prop不是一個(gè)簡(jiǎn)單的屬性，而是包在其它對(duì)象下的屬性。如：

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

??form的model綁定的form對(duì)象，其形式為：

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

          // 用戶類型選擇框當(dāng)前顯示值
          userTypeLabel : "",
          // ...
        },

??此時(shí)，rules的元素定義，不能用下列形式：

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

??這樣，編譯會(huì)報(bào)錯(cuò)！

??應(yīng)使用下列形式：

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

??即用單引號(hào)或雙引號(hào)將之包起來(lái)，變成一個(gè)字符串。

3.2、自定義校驗(yàn)器validator

??關(guān)于自定義校驗(yàn)器validator，網(wǎng)上的相關(guān)資料很多，如常用正則檢查的validator。

??規(guī)則定義方法：

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

??表示'formData.loginName'屬性使用了loginNameValidator的校驗(yàn)器?？紤]到代碼的復(fù)用，一般將自定義的校驗(yàn)器獨(dú)成了js文件，便于其它頁(yè)面或項(xiàng)目使用。

??在/src/common/目錄下，創(chuàng)建validator.js文件，代碼如下：

/* 登錄名校驗(yàn) */exportfunctionloginNameValidator(rule, value, callback){
  const reg= /^[a-zA-Z][\w-. @]*$/;
  if(value == '' || value == undefined || value == null){
    callback();
  }else {  
    if (!reg.test(value)){
      callback(newError('要求為：英文字母開頭，后續(xù)為字母數(shù)字及_-. @符號(hào)'));
    }else {
      callback();
    }
  }
}

??在vue文件中導(dǎo)入此validator.js文件：

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

??如果需導(dǎo)入多個(gè)外部校驗(yàn)器，則在{}中包含多個(gè)，如{loginNameValidator,passwordValidator}。

??這里有個(gè)小坑，稍微提一句。

??根據(jù)目錄結(jié)構(gòu)，我先使用下列語(yǔ)句：

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

??結(jié)果，編譯錯(cuò)誤，說(shuō)找不到'../../../common/validator.js'文件，于是各種路徑表示方法嘗試，均告失敗。最后還是使用改用@通過(guò)了，因?yàn)?bulid/webpack.base.conf.js中配置了alias，指示@表示src目錄。

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

functionValidatorFuncName(rule, value, callback)

??方法名，隨意指定。

??實(shí)際上，其完整形式為：

functionValidatorFuncName(rule, value, callback, source, options)

??參數(shù)含義如下：

• rule：指向規(guī)則的對(duì)象，可以在方法代碼中，加入第一句：

console.log(rule);

可將rule參數(shù)打印出來(lái)看，就是本條規(guī)則的對(duì)象數(shù)據(jù)。

• value：屬性的值，該值為需要校驗(yàn)的值。

• callback：指向校驗(yàn)結(jié)束的回調(diào)函數(shù)，如果校驗(yàn)通過(guò)，調(diào)用callback()，如果未通過(guò)，一般使用下列形式：

callback(newError('具體的提示信息'));

??或帶參數(shù)的提示：

returncallback(newError(`${rule.field} must be lowercase alphanumeric characters`));

??注意，字符串格式化，不是使用單引號(hào)括起來(lái)，而是用“~”符號(hào)括起來(lái)。

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

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

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

??實(shí)際上，可以返回一個(gè)Error的數(shù)組，即errors，如：

const errors = [];
      errors.push(newError('要求為：英文字母開頭，后續(xù)為字母數(shù)字及_-. @符號(hào)'));
      errors.push(newError('3444要求為：英文'));
      returncallback(errors);

??但從實(shí)際效果看，表單只顯示了第一行的提示，估計(jì)Element的表單不支持顯示多行錯(cuò)誤信息。

• source：為調(diào)用校驗(yàn)的屬性對(duì)象，可以打印出來(lái)看一下。

• options，附加參數(shù)，主要是預(yù)定義的消息格式，也可以打印出來(lái)看一下。

??更復(fù)雜的校驗(yàn)器，可以攜帶參數(shù)，如：

// 整數(shù)范圍值校驗(yàn)exportconstintRangeValidator = (min, max) => (rule, value, callback) => {
  var isInRange = (value >= min) && (value <= max);
  const reg = /^-?\d+$/;
  var isInt = reg.test(value);
  if (isInRange && isInt){
    returncallback();
  }else{
    returncallback(newError(`要求是在${min}到${max}的整數(shù) [${min}, ${max}]`));
  }
}

??使用方法：

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

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

??自定義校驗(yàn)器validator提供了自由發(fā)揮的空間，可以使用正則匹配、數(shù)值計(jì)算和比較等運(yùn)算等，進(jìn)行復(fù)雜的校驗(yàn)，因此比較常用。但用自定義校驗(yàn)器validator，有時(shí)會(huì)顯得過(guò)于繁瑣。

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

??放置在data中，但不被return所包括的位置，尾部沒(méi)有逗號(hào)。

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

??或直接在規(guī)則中定義：

'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(newError('要求為：英文字母開頭，后續(xù)為字母數(shù)字及_-. @符號(hào)'));
                }else {
                  callback();
                }
              }                
            }, 
             trigger: 'blur'}
          ],

3.3、類型type

??類型type的基本用法如下：

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

??類型也是一個(gè)規(guī)則項(xiàng)，如不符合類型要求，則提示錯(cuò)誤信息。

??規(guī)則支持的類型如下：

• string，字符串類型，這是默認(rèn)類型。如不指定type，默認(rèn)就是string。

• number，數(shù)字類型。包括整數(shù)和小數(shù)。

• integer，整數(shù)類型。

• float，浮點(diǎn)數(shù)類型，此時(shí)不能為整數(shù)，必須有小數(shù)點(diǎn)。

• boolean，布爾類型，true/false值。

• array，數(shù)組類型。

• object，對(duì)象類型，不能為數(shù)組。

• enum，枚舉類型，然后需要聲明該枚舉類型。

• method，函數(shù)（或方法）類型。

• regexp，正則類型，必須是一個(gè)合法的正則表達(dá)式，可以通過(guò)new RegExp來(lái)創(chuàng)建。

• date，日期類型，值必須可以轉(zhuǎn)為有效日期值。

• url，url類型，值需要符合url格式。

• email，email類型，符合郵箱格式。

• hex，16進(jìn)制表示的形式。如0xFF12。

• any，任意類型，不限制。

??這里的url和email類型，可以直接用于相關(guān)含義的屬性校驗(yàn)，如：

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

??日期類型也比較有用，這些內(nèi)置類型，使得我們可以不必通過(guò)自定義校驗(yàn)器validator來(lái)處理。

??對(duì)于數(shù)值類型（number，integer，float）以及boolean型，由于input輸入的都為字符串，因此必須進(jìn)行類型轉(zhuǎn)換，否則校驗(yàn)通不過(guò)。這里涉及到transform的用法。

3.3、數(shù)據(jù)轉(zhuǎn)換transform

??transform是一個(gè)鉤子函數(shù)，在開始驗(yàn)證之前可以對(duì)數(shù)據(jù)先處理后驗(yàn)證。如下面示例：

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

??經(jīng)過(guò)transform類型轉(zhuǎn)化后，formData.age屬性的校驗(yàn)規(guī)則就能正常使用了，否則總是通不過(guò)類型校驗(yàn)。（這里實(shí)際上有點(diǎn)問(wèn)題，如允許輸出12ab這種形式的值，parseInt得到值為12）

??對(duì)于類型轉(zhuǎn)換，transform還有更簡(jiǎn)潔而嚴(yán)格的表述：

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

??表示轉(zhuǎn)換為數(shù)字類型，這樣就行了。值為1.2或12ab都不能通過(guò)校驗(yàn)。

??transform除了類型轉(zhuǎn)換外，還可以進(jìn)行其它處理，如：

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

??等于某個(gè)值：

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

??不等于某個(gè)值：

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

3.4、數(shù)值范圍Range

??Range不是規(guī)則的屬性字段，其通過(guò)min和max屬性來(lái)體現(xiàn)。

??如果類型type為string或array，則min和max表示長(zhǎng)度。

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

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

??這樣，范圍校驗(yàn)直接可使用規(guī)則的內(nèi)置屬性，在規(guī)則中進(jìn)行描述，也無(wú)需用intRangeValidator校驗(yàn)器和正則匹配方式了。

3.5、枚舉值

??枚舉值類型的用法示例：

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

??或：

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

??使用有下列問(wèn)題：

• 反應(yīng)比較遲鈍，就是一開始幾次輸入，沒(méi)有校驗(yàn)，一旦有校驗(yàn)了，后面都就可以了。

• 對(duì)于后一種情況，即范圍為字符串的集合，校驗(yàn)正常。對(duì)于前一種情況，即范圍為整數(shù)型的，0也通過(guò)校驗(yàn)了，導(dǎo)致任意字符串也通過(guò)校驗(yàn)了，這是一個(gè)bug。

??因此，也可以利用字符串枚舉值，來(lái)校驗(yàn)范圍：

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

??注意：此時(shí)1e3，9e811被認(rèn)為是通過(guò)校驗(yàn)了，因?yàn)閜arseInt函數(shù)只取e前面的數(shù)字，而isNaN認(rèn)為是數(shù)字?？磥?lái)還是需要與正則規(guī)則配合才行。

3.6、正則Pattern

??pattern屬性，就是正則表達(dá)式匹配校驗(yàn)規(guī)則，如：

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

??效果與之前的loginNameValidator校驗(yàn)器相同，區(qū)別在于loginNameValidator可以復(fù)用，保持一個(gè)正則校驗(yàn)，如需修改，只需改動(dòng)一處。而使用pattern則不然。但使用pattern可以少寫自定義校驗(yàn)器，給了用戶一個(gè)選擇。

??使用pattern屬性，可以進(jìn)行等于某個(gè)值某個(gè)值的校驗(yàn)。

??等于某個(gè)值：

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

??關(guān)于js正則表達(dá)式，可先用js正則表達(dá)式在線測(cè)試工具測(cè)試一下，檢查是否達(dá)到預(yù)期效果。js正則表達(dá)式在線測(cè)試地址：https://c.runoob.com/front-end/854。

3.7、長(zhǎng)度len

??len屬性，如果類型為string或array，則冷表示長(zhǎng)度。如果為數(shù)字型，則表示數(shù)字值就是len屬性值。

??len屬性與min、max屬性同時(shí)出現(xiàn)了，len屬性有更高的優(yōu)先級(jí)。

??len屬性，可用于格式化的字符串校驗(yàn)，如身份證號(hào)碼長(zhǎng)度。

??len也可用于等于某個(gè)數(shù)值的校驗(yàn)，如：

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

3.8、空白whitespace

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

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

??值為空格，會(huì)提示告警。

??如果不希望空格干擾校驗(yàn)，可用transform來(lái)處理：

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

3.9、i18n

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

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

??中文語(yǔ)言顯示“關(guān)于”，英文語(yǔ)言顯示“about”。

??當(dāng)然，你也可以換成任意的其它函數(shù)，如：

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

4、規(guī)則校驗(yàn)的高級(jí)模式

4.1、異步校驗(yàn)器asyncValidator

??異步校驗(yàn)器用于遠(yuǎn)程訪問(wèn)，利用ajax或axios請(qǐng)求數(shù)據(jù)，對(duì)響應(yīng)數(shù)據(jù)進(jìn)行校驗(yàn)或?qū)Ξ惓＿M(jìn)行提示。

??本地頁(yè)面校驗(yàn)，屬于串行校驗(yàn)，逐個(gè)檢查各字段的校驗(yàn)規(guī)則，遇到未通過(guò)即返回校驗(yàn)失敗。

??遠(yuǎn)程校驗(yàn)，為異步校驗(yàn)，多個(gè)請(qǐng)求，響應(yīng)時(shí)間各有不同，響應(yīng)的先后次序就無(wú)法預(yù)知。

??異步校驗(yàn)的作用：可以將前端和后端針對(duì)相同屬性字段，使用相同的校驗(yàn)規(guī)則，統(tǒng)一由后端提供校驗(yàn)。但這同樣增加了前后端溝通和一致性維護(hù)的成本。

??目前暫時(shí)未用到異步校驗(yàn)器，這里用官網(wǎng)的示例：

asyncField1:{asyncValidator: myAsyncValidator}

??myAsyncValidator可類似validator位置放置。假設(shè)放置在data中。

constmyAsyncValidator = (rule, value, callback) => {
      ajax({
        url: 'xx',
        value: value,
      }).then(function(data) {
        callback();
      }, function(error) {
        callback(newError(error));
      });
    }

??Promise異步字段校驗(yàn)：

constmyAsyncValidator = (rule, value) => {
      returnajax({
        url: 'xx',
        value: value,
      });
    }

??區(qū)別在于Promise異步字段校驗(yàn)，需要使用者自己寫上.then/.catch處理邏輯，不支持回調(diào)。

??異步校驗(yàn)，還涉及到Options屬性，

options: { first: true },

??first為true，表示多個(gè)異步校驗(yàn)遇到第一校驗(yàn)失敗就不再處理其它異步校驗(yàn)。

4.2、深層規(guī)則Deep rules

??對(duì)于對(duì)象Object或數(shù)組Array的校驗(yàn)，需要具體到每一個(gè)元素（成員），這里就要用到Deep rules。

??Deep rules涉及到fields和defaultField兩個(gè)屬性。

??如官網(wǎng)示例（按照習(xí)慣形式略作修改）：

??對(duì)象的深層校驗(yàn)：

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 }],
};

??數(shù)組的深層校驗(yàn)：

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

??數(shù)組的深層校驗(yàn)，看起來(lái)比較傻，每個(gè)成員都要設(shè)置校驗(yàn)規(guī)則，對(duì)于動(dòng)態(tài)數(shù)組，似乎也不知該如何設(shè)置。

??defaultField屬性，使我們對(duì)字段校驗(yàn)規(guī)則有了統(tǒng)一設(shè)置的手段。此屬性可以作用在校驗(yàn)屬性字段上，也可以作用在fields上。

??例如：

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

??如果是對(duì)象數(shù)組，該如何設(shè)置？可如下方式：

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 }],                  
        }
    }
  }],
};

??數(shù)組套對(duì)象，對(duì)象套子對(duì)象，看起來(lái)有點(diǎn)復(fù)雜。

4.3、動(dòng)態(tài)規(guī)則集

??有時(shí)候不同模式進(jìn)入表單，需要應(yīng)用不同的規(guī)則。如新增和編輯操作，顯示同一個(gè)頁(yè)面組件。但此時(shí)對(duì)頁(yè)面需要校驗(yàn)的屬性字段有所不同，如何設(shè)置？

??有兩個(gè)處理方案。方案1是配置兩套規(guī)則集，根據(jù)不同模式進(jìn)行切換；方案2是配置總的規(guī)則集，根據(jù)不同模式抽取合適的屬性字段和規(guī)則，動(dòng)態(tài)構(gòu)建規(guī)則集。

4.3.1、切換校驗(yàn)規(guī)則集

??切換校驗(yàn)規(guī)則集，示例代碼如下：

// data 部分// 當(dāng)前規(guī)則集rules:{},
      // 模式1規(guī)則集rules1:{
         ...
      },
      // 模式2規(guī)則集rules2:{
          ...
      },

      // methods部分// 動(dòng)態(tài)切換// 頁(yè)面初始化init(obj,data){
        this.prevForm = obj;

        // 設(shè)置頁(yè)面可見(jiàn)this.visible = true;

        // DOM更新之后執(zhí)行this.$nextTick(()=>{
          // 重置當(dāng)前頁(yè)面的所有字段值this.$refs['form'].resetFields();

          if (data){
            // 模式1this.form.patternType = 1;        
          }else{
            // 模式2this.form.patternType = 2;
          }        
          // 設(shè)置校驗(yàn)規(guī)則this.setValidRules(this.form.patternType);
        }
 	  },
      setValidRules(patternType){
        if(patternType == 1){
            this.rules = this.rules1;
        }elseif(patternType == 2){
            this.rules = this.rules2;
        }
      },

??這樣，根據(jù)不同模式，切換了校驗(yàn)規(guī)則集。為了切換規(guī)則時(shí)，立即執(zhí)行規(guī)則校驗(yàn)，需要設(shè)置el-form的validate-on-rule-change為false，即：

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

4.3.2、動(dòng)態(tài)構(gòu)建校驗(yàn)規(guī)則集

??動(dòng)態(tài)構(gòu)建校驗(yàn)規(guī)則集，示例代碼如下：

// data 部分// 當(dāng)前規(guī)則集rules:{},
      // 規(guī)則全集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部分// 動(dòng)態(tài)切換// 頁(yè)面初始化init(obj,data){
        this.prevForm = obj;

        // 設(shè)置頁(yè)面可見(jiàn)this.visible = true;

        // DOM更新之后執(zhí)行this.$nextTick(()=>{
          // 重置當(dāng)前頁(yè)面的所有字段值this.$refs['form'].resetFields();

          if (data){
            // 模式1this.form.patternType = 1;        
          }else{
            // 模式2this.form.patternType = 2;
          }        
          // 設(shè)置校驗(yàn)規(guī)則this.setValidRules(this.form.patternType);
        }
 	  },
      setValidRules(patternType){
        if (patternType == 1){
          // 模式1// 先清空，再設(shè)置          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，需要驗(yàn)證登錄名和密碼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'];
        }
      },          

??同樣也需要設(shè)置el-form的validate-on-rule-change為false。

4.4、動(dòng)態(tài)表格字段校驗(yàn)

??有的表單，使用了可編輯的動(dòng)態(tài)表格，如添加一數(shù)據(jù)行，直接在數(shù)據(jù)行中輸入數(shù)據(jù)，然后提交。此時(shí)需要對(duì)數(shù)據(jù)行各字段的輸入進(jìn)行校驗(yàn)。

??有2個(gè)方案。

??方案1使用Deep rules的defaultField，對(duì)對(duì)象數(shù)組進(jìn)行字段校驗(yàn)，見(jiàn)上面的示例代碼。

??方案2，在el-form-item層級(jí)使用rules屬性綁定該字段規(guī)則，可參見(jiàn)：https://www.jianshu.com/p/e51107b57366。

4.5、多字段聯(lián)合校驗(yàn)

??多字段聯(lián)合校驗(yàn)應(yīng)用場(chǎng)合還是比較常見(jiàn)的，如文本開始的問(wèn)題，不同ID類型，有不同的校驗(yàn)規(guī)則；如密碼驗(yàn)證，兩次密碼要相同；如購(gòu)買數(shù)量不能超過(guò)庫(kù)存數(shù)量，時(shí)間段開始時(shí)間要不大于結(jié)束時(shí)間，等等。

??關(guān)鍵技巧，利用校驗(yàn)器的第一個(gè)參數(shù)rule，添加一個(gè)或若干個(gè)自定義屬性，傳遞信息到校驗(yàn)器進(jìn)行處理。使用方法如下：

??作為示例，假設(shè)'formData.email'字段校驗(yàn)依賴于userType的值。

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

??沒(méi)有辦法初始綁定：

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

??這樣寫，瀏覽器調(diào)試器顯示錯(cuò)誤，提示調(diào)用resetFields出錯(cuò)。

??因此，正確的形式為：

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

??或：

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

??然后，在頁(yè)面初始化時(shí)，或選擇框選擇改變的chage事件方法中，動(dòng)態(tài)設(shè)置規(guī)則中userType屬性的值：

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

??試驗(yàn)結(jié)果，用$set沒(méi)法動(dòng)態(tài)綁定，即下列語(yǔ)句沒(méi)有作用：

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

??好了，現(xiàn)在可以編寫一個(gè)聯(lián)合校驗(yàn)器idFieldWithTypeValidator了。簡(jiǎn)單起見(jiàn)，在data部分編寫：

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

??測(cè)試一下，在瀏覽器控制臺(tái)輸出rule的打印信息如下：

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

??此時(shí)，userType已經(jīng)通過(guò)rule參數(shù)傳入，現(xiàn)在可以進(jìn)行聯(lián)合校驗(yàn)了。

import {loginNameValidator,phoneNoValidator,idNoValidator,eMailValidator} from'@/common/validator.js'exportdefault {
    data() {
      // 不同類型情況下的ID字段校驗(yàn)器constidFieldWithTypeValidator = (rule, value, callback) =>{
        // 獲取用戶類型console.log(rule);
        if (rule.userType == 1){
          // 手機(jī)號(hào)碼phoneNoValidator(rule, value, callback);
        }elseif(rule.userType == 2){
          // 身份證號(hào)碼idNoValidator(rule, value, callback);
        }elseif(rule.userType == 3){
          // emaileMailValidator(rule, value, callback);
        }
      }

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

??其中phoneNoValidator、idNoValidator、eMailValidator分別是手機(jī)號(hào)碼校驗(yàn)器、身份證號(hào)碼校驗(yàn)器、郵箱格式校驗(yàn)器，由validator.js中輸出，idFieldWithTypeValidator校驗(yàn)器根據(jù)userType參數(shù)的取值不同，分別調(diào)用了相關(guān)的validator類型的校驗(yàn)器。當(dāng)然，在idFieldWithTypeValidator的方法代碼中，也可以將各個(gè)校驗(yàn)器的代碼搬過(guò)來(lái)，不調(diào)用外部校驗(yàn)器。

??下面為補(bǔ)充內(nèi)容：

??上述的解決方案的不好之處，是沒(méi)有將規(guī)則附加屬性”userType“值綁定到data的form.formData.userType屬性上，沒(méi)法聯(lián)動(dòng)，導(dǎo)致this.form.formData.userType修改之處，就需要設(shè)置?？紤]到其它情況，如開始日期和結(jié)束日期的先后范圍校驗(yàn)等情況，el-input或el-select的change事件來(lái)設(shè)置值帶來(lái)更多的代碼開銷。因此，考慮了一下，現(xiàn)在有了新的方法，即規(guī)則附加屬性是一個(gè)函數(shù)方法，此方法可以返回this.form.formData.userType的最新值。

??代碼如下：

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

??data的rules的部分：

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

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

??校驗(yàn)器idFieldWithTypeValidator的代碼更新為：

// 不同類型情況下的ID字段校驗(yàn)器constidFieldWithTypeValidator = (rule, value, callback) =>{
        // 獲取獲取值的方法var getvalueMethod= rule.getValueFunc;
        // 調(diào)用方法，取得參數(shù)值，根據(jù)需要，可以返回任意類型數(shù)據(jù)，如對(duì)象，數(shù)組等var userType = getvalueMethod();
        // console.log(userType);if (userType == 1){
          // 手機(jī)號(hào)碼phoneNoValidator(rule, value, callback);
        }elseif(userType == 2){
          // 身份證號(hào)碼idNoValidator(rule, value, callback);
        }elseif(userType == 3){
          // emaileMailValidator(rule, value, callback);
        }
      }

??這樣，只要有一個(gè)函數(shù)方法來(lái)附加到規(guī)則中，根據(jù)需要，任意多個(gè)字段聯(lián)合校驗(yàn)都沒(méi)有問(wèn)題，必要時(shí)，可以讓getValueFunc返回form.formData對(duì)象數(shù)據(jù)或form對(duì)象數(shù)據(jù)，相當(dāng)于提供了隨意訪問(wèn)其它數(shù)據(jù)的能力。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-435353.html