Element Ui使用技巧——Form表單的校驗規則rules詳細說明

Element UI中對Form表單驗證的使用介紹：

Form 組件提供了表單驗證的功能，只需要通過 rules 屬性傳入約定的驗證規則，並將 Form-Item的 prop 屬性設置為需校驗的字段名即可。校驗規則參見 async-validator

文檔中提及的用法有2種：

1.對整個表單進行規則驗證：

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="密碼" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="確認密碼" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  ......
</el-form>
<script>
  export default {
    data() {
      ......
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('請輸入密碼'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          age: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          ......
        }
      };
    },
    ......
  }
</script>

如上，在data中定義表單驗證規則的對象數組rules（可以單獨編寫驗證器函數），並直接綁定到表單標簽的rules參數中。

其中，validator是單個表單域格式驗證的驗證器，一般是需要比較復雜的格式驗證的時候才會用。如果是非空驗證、數據類型驗證或者正則表達式能處理的，都可以直接通過rules的type/Pattern等相關參數直接配置就好了。 

2.對單個表單域進行驗證：

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item 
    label="郵箱" prop="email" :rules="[ { required: true, message: '請輸入郵箱地址', trigger: 'blur' }, { type: 'email', message: '請輸入正確的郵箱地址', trigger: ['blur', 'change'] } ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>
  <el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains" :label="'域名' + index" :key="domain.key" :prop="'domains.' + index + '.value'" :rules="{ required: true, message: '域名不能為空', trigger: 'blur' }"
  >
    ......
</el-form>
<script>
  export default {
    data() {
      return {
        dynamicValidateForm: { domains: [{ value: '' }], email: '' }
      };
    },
    ......
  }
</script>

如上，對於單個表單域，可以直接對表單域的rules參數進行配置，來實現格式驗證，這種方法一般比較適用於格式驗證比較簡單的情況。

如果需要進行驗證的字段比較多，或者驗證規則比較復雜，那么最好使用上邊對整個表單進行驗證的方式。

官方文檔中的介紹太過粗略，下面單獨介紹rules的用法，詳細校驗規則參見 async-validator。

表單驗證規則rules的詳細用法：

結合Element UI的例子：

      rules: {
          name: [
            { required: true, message: '請輸入活動名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '請選擇活動區域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '請選擇日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '請選擇時間', trigger: 'change' }
          ]
          ......
        }

如上，rules中單個表單域校驗規則可以包含多個數組，每個數組即是一條校驗規則：

name: [
   { required: true, message: '請輸入活動名稱', trigger: 'blur' },
   { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
]

數組中的單個檢驗規則對象中包含required/message/trigger/min/max等參數，這些參數配合起來，可以完成我們以往要編寫多行代碼才能實現的校驗功能。下面就詳細介紹這些參數。

type:

表明要使用驗證器的類型，類似數據格式檢驗，其中還有email、url、regexp、method等特定格式字段的驗證。

使用這個，我們就可以對一些特定的字段進行校驗，而不用再像以前一樣寫正則，做判斷。

比如只需要配置 type:'email' 的規則就可以驗證email了，驗證器都已經封裝好了這些功能，你只需調用就可以了，這也是。

可識別的類型值有：

• string: 字符串類型（默認值）
• number: 數字類型
• boolean:布爾類型
• method: 函數類型
• regexp:正則表達式
• integer: 整型
• float: 雙精度浮點型數字
• array: 數組類型
• object: 對象類型
• enum: 枚舉值
• date: 日期格式
• url: 網址格式
• hex: 16進制數字
• email: 電子郵箱格式
• any: 任意類型

驗證電子郵箱的完整示例代碼：

email = [{
    type: "string",
    required: true,
    message: '請輸入郵箱地址',
    trigger: 'blur'
  },
  {
    type: 'email',
    message: '請輸入正確的郵箱地址',
    trigger: ['blur', 'change']
  }
]

如上，實現了文本框失去焦點進行非空檢驗，失去焦點、內容改變進行格式驗證，並給出相應提示，是不是比我們以前用原生js來實現簡單明了多了呢。

required：

必填字段，即非空驗證。如上面實例中的的非空驗證，以及郵箱前邊的必填符號*，就是這個參數的功勞。

pattern：

正則表達式，如果需要驗證手機號碼之類，可以直接編寫正則表達式配置到校驗規則中，那么就不需要自己去校驗了，由校驗器自動校驗。

{ type : "string" , required: true , pattern : /^[a-z]+$/ }

min/max：

判斷數據大小范圍，通常對數字大小范圍做校驗。對於字符串和數組類型，將根據長度進行比較。

{ required: true, message: '請輸入活動名稱', trigger: 'blur' },
{ min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }

len：

長度驗證，如11位手機號碼。

roles: {
    type: "array", required: true, len: 3
}

enum：

枚舉值驗證，示例代碼如下：

role: {type: "enum", enum: ['admin', 'user', 'guest']}

whitespace:

驗證是否只有空格(如果沒有該配置，則全空格的輸入值也是有效的）。

whitespace: [{
    type: "string",
    message: '只存在空格',
    whitespace:true,
    trigger: ['change', 'blur']
}]

transform：

有時有必要在驗證之前轉換值，以強制或以某種方式對其進行清理。為此 transform ，向驗證規則添加一個功能。在驗證之前，先轉換屬性，然后將其重新分配給源對象，以更改該屬性的值。

// 校驗
transform: [
 {
    type: 'enum',
    enum: [2,4,6], 
    message: `結果不存在`, 
    trigger: ['change', 'blur'],
    transform(value) {
      return Number(value * 2)
    }
  }
]

如上，只有輸入1、2、3的時候才能校驗通過。

貌似這個只能輔助校驗，並不能改變組件綁定變量本身的值。

fields:

深層規則，可以通過將嵌套規則分配給規則的屬性來驗證object或array類型的驗證規則，如地址對象的省市區的規則驗證：

object類型：

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"}
    }
  }

array類型：

  roles: {
    type: "array", required: true, len: 3,
    fields: {
      0: {type: "string", required: true},
      1: {type: "string", required: true},
      2: {type: "string", required: true}
    }
  }

messages:

未通過校驗的提示信息：

{name:{type: "string", required: true, message: "Name is required"}}

支持html:

{name:{type: "string", required: true, message: "<b>Name is required</b>"}}

支持vue-i18n:

{name:{type: "string", required: true, message: () => this.$t( 'name is required' )}}

validator：

可以為指定字段自定義驗證函數——這就相當於把前邊配置的東西用js按照以前的方式編寫驗證邏輯了。雖然麻煩點，但是能實現比較復雜的業務邏輯判斷。

簡單的用法：

  field: {
    validator(rule, value, callback) {
      return value === 'test';
    },
    message: 'Value is not equal to "test".',
  }

還可以這樣用：

......    
data() {
      const checkAge = (rule, value, callback) => {
        if(!value) {
          return callback(new Error('年齡不能為空'));
        }
        setTimeout(() => {
          if(!Number.isInteger(value)) {
            callback(new Error('請輸入數字值'));
          } else {
            if(value < 18) {
              callback(new Error('必須年滿18歲'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      return {
        ruleForm: {
          age: 11
        },
        rules: {          
          age: [{
            type: 'number',
            required: true,
            validator: checkAge,
            trigger: ['blur', 'change']
          }]
        }
      };
}
......

小結：

如上，官方介紹的比較常用的驗證規則也就是這些了，如果有比較復雜的邏輯判斷可以直接通過編寫validator來實現就好了。