Element表單驗證（1）

Element表單驗證（1）

首先要掌握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 }
}