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