首先要掌握Element官方那幾個表單驗證的例子，然後才看下面的教程。

Element主要使用了async-validator這個庫作為表單驗證

async-validator主要分成三部分

• Validate
• Options
• Rules

其中，對於我們使用Element的來說，Rules最重要，也是這部分內容較多的。

async-validator各部分

async-validator基本使用

import Validator from 'async-validator'

// 規則的描述
const rules = {
  name: { type: 'string', required: true }
}

// 根據規則生成驗證器
const validator = new Validator(rules)

// 要驗證的資料來源
const source = {
  name: 'LanTuoXie'
}

// 驗證後的回撥函式
function callback (errors, fileds) {
  if (errors) {
    // 驗證不通過，errors是一個數組，記錄那些不通過的錯誤資訊
    // fileds是所有資料來源的欄位名，也即上面的source的'name'
    // 驗證是根據欄位名來的，rules.name 對應 source.name。 欄位名要一樣才會驗證
  }
  // 下面是驗證通過的邏輯
}

// 驗證資料來源是否符合規則
validator.validate(source, callback)
 

Validate

就是上面例子中的validator.validate，是一個函式

function(source, [options], callback)

source和callback對應上面的例子。

Options

Options有兩個值

• first: 一個布林值，如果出現欄位不通過，終止驗證後面的欄位
• firstFields: 布林值或者字串，如果驗證一個欄位時，一個規則不通過，終止驗證下個規則(一個欄位，多個規則的情況)

firstFields是針對單個欄位多規則的情況下使用，而first是針對所有欄位

Rules

最重要的還是Rules。定義rule可以有三種形式，但是rules欄位名一定要和資料來源source的欄位名一致。

• 函式的方式：{ name(rule, value, callback, source, options) {} }
• 物件的方式： { name: { type: 'string', required: true } }
• 陣列的方式： { name: [{ type: 'string' }, { required: true }] }

上面可以看到，欄位名name可以有3種方式定義規則，在使用Element的時候還是推薦物件和陣列的方式，這個兩個比較簡單，函式看情況使用。

除了type和required還有哪些用法可以用以及有什麼用？

Rules的預設規則

• type: 要被驗證的資料的型別如url和number等
• required： 是否必填
• pattern：使用正則來驗證
• min: 資料的長度的最小值 (資料型別必須是string或array)
• max: 資料的長度的最大值 (資料型別必須是string或array)
• len: 資料的長度必須等於這個值 (資料型別必須是string或array)
• enum: 資料的值必須等於這個列舉陣列某個元素 { enum: [1, 2, 3] }
• transform: 一個鉤子函式，在開始驗證之前可以對資料先處理後驗證，如吧number轉為string後再驗證
• message: 報錯的提示資訊可以是字串也可以是jsx標籤<span>Name is required</span>
• validator: 自定義驗證函式以及報錯資訊 validator(rule, value, callback)
• 還有一個Deep Rules是處理object或者array型別的，使用了fields 或defaultField
• fields：Deep Rules的時候使用，定義下一層的欄位名以及規則
• defaultField: Deep Rules的時候使用，所有下一層的欄位都會採用該規則，可以被fields替換

預設的Type

• string：必須是String型別，規則不設定type預設是這個
• number：必須是Number型別，如果後臺返回的資料是字串，可以用transform轉為Number型別，字串型別的數字（'12'）不會通過，要注意
• boolean: 必須是Boolean型別
• method: 必須是Function
• regexp：必須是正則RegExp
• integer：是Number型別的正整數
• float: 是Number型別的浮點數
• array: 是Array.isArray通過的陣列
• object: Array.isArray不通過的Object型別
• enum: 要先定義enum，然後值必須是enum某個值
• date: 必須是Date物件的例項
• url: String型別且符合連結格式
• hex
• email: String型別，且符合郵箱格式

Deep Rules使用demo

cosnt urls = ['http://www.baidu.com', 'http://www.baidu.com']
// 一個urls的陣列，
const rules = {
  urls: {
    type: 'array',
    required: true,
    defaultField: { type: 'url' }
  }
}

const ids = {
  name: 'LanTuoXie',
  age: 12,
  spc: '帥'
}

const rules = {
  ids: {
    type: 'object',
    required: true,
    fields: {
      name: { type: 'string', required: true },
      age: { type: 'number', required: true, tranform: Number },
      spc: { type: 'string', required: true }
    }
  }
}

自定義驗證validator

validator(rule, value, callback)

• rule: 記錄了驗證欄位的欄位名以及規則的資訊
• value: 要驗證的值
• callback: 如果callback()代表驗證通過，如果callback(new Error('錯誤要提示的資訊'))代表驗證不通過

// 驗證是[min, max]範圍內的正整數
const betweenInt = (min, max) => (rule, v, cb) => {
  const isBetween = v >= min && v <= max
  const isInt = /^[0-9]+$/.test(v)
  if (isBetween && isInt) return cb()

  return cb(new Error(`要求是在${min}到${max}的正整數 [${min}, ${max}]`))
}

const rules = {
  num: { validator: betweenInt(1, 5), required: true }
}