懒人听书,择天记,小说阅读网

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

Async-Validator源碼學習：文檔翻譯

async-validator 是一個表單異步校驗庫，阿里旗下的 Ant-design 和 Element 組件庫中的表單驗證使用的都是 async-validator ，目前版本已更新到 4.0.7 ，下載量達到 1,067,202次，不僅支持 js ，同時也可支持 typeScript 。是一個功能超級強大的庫，有興趣的一起來了解了解。

創(chuàng)新互聯(lián)主營洛川網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件定制開發(fā),洛川h5小程序設(shè)計搭建,洛川網(wǎng)站營銷推廣歡迎洛川等地區(qū)企業(yè)咨詢

async-validator 官網(wǎng)地址：

https://www.npmjs.com/package/async-validator。

async-validator 美中不足的是沒有中文官方文檔，看著英文的好費勁!網(wǎng)上百度了一堆都是低版本的翻譯，現(xiàn)在升級到 4.0.7 了，有些性能廢棄了，會出現(xiàn)一些不起作用的屬性，所以今天幫大家也幫自己翻譯一下，便于學習。

一、從入門到上手

安裝命令：

npm i async-validator
// 或
npm install async-validator

使用方法：

// 引入異步
import Schema from 'async-validator'
// 定義規(guī)則描述
const des = {
 name: {
  type: "string",
  required: true,
  message: "內(nèi)容不能為空"
 }
}
// 創(chuàng)建校驗器
const validator = new Schema(des)
// 添加校驗
validator.validate({ name: "值" }, (errors, field) => {
 if(errors){
  return new Error(`校驗失敗`)
 }
 // 校驗失敗
})

在 vue3 引入 Ant-design 組件中使用 async-validator ，使用實例：

Promise 使用方法：

// 引入異步
import Schema from 'async-validator'
// 定義規(guī)則描述
const des = {
 name: {
  type: "string",
  required: true,
  message: "內(nèi)容不能為空",
  asyncValidator: (rule,value) => {
   // @rule 獲取到是此處限制規(guī)則
   // @value 獲取到屬性 name 的值
   return new Promise((resolve,reject) => {
    setTimeout(()=>{ // 使用定時器模擬異步操作
    if(value != ""){
     resolve() //成功
    }else{
     reject("校驗失敗")
    }
    },2000)
   })
  }
 }
}
// 創(chuàng)建校驗器
const validator = new Schema(des)
// 添加校驗
validator.validate({ name: "值" }, (errors, field) => {
}).then(() => {
 console.log('校驗成功')
}).catch(({ errors, fields } => {
  console.log('校驗失敗', errors)
}))

使用方法挺簡單的，可以根據(jù)上述的實例進行簡單修改就可以實現(xiàn)，也可以自己動手試試!

二、API 學習

1、validate

validate：添加校驗的方法，使用語法：

validator.validate( source , [options], callback ): Promise

source 是需要校驗的屬性和值，必傳參數(shù)。
options 是描述處理驗證對象的選項。
callback 校驗完成之后的回調(diào)函數(shù)。

該方法返回的是 Promise 對象，所以有：

then() 成功回調(diào)。
catch(({ errors, fields })=>{}) 失敗回調(diào)。

Options 選項參數(shù)有：

suppressWarning：是一個 Boolean 值，是否抑制無效的內(nèi)部警告。
first：是一個 Boolean 值，當?shù)谝粋€校驗失敗時，是否繼續(xù)向后校驗，如果為真，只返回第一個校驗失敗信息。
firstFields：是一個 Boolean 值或字符串數(shù)組，當指定的第一個校驗規(guī)則生成錯誤時調(diào)用回調(diào)，不再處理同一字段的驗證規(guī)則，true 表示所有字段。

2、Rules

rules ：表示校驗規(guī)則，通常有兩種寫法：

第一種：經(jīng)常寫成一個對象數(shù)組，便于給單個字段添加多個驗證規(guī)則。使用如下：

const descriptor = {
 name:[
  {
    type: 'string',
    required: true,
    validator(rule, value) {
     return value != ''
    }
    message: '用戶名不能為空',
   },
   {
     type: 'string',
     min: 3,
     max: 8,
     validator(rule, value) {
      return rule.min < value.length && value.length < rule.max
     },
    message: '用戶名長度 3-8',
   },
 ]
}

第二種：也可以定義成執(zhí)行驗證的函數(shù)，使用語法：

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

rule 是源描述符中與正在驗證的字段名相對應(yīng)的驗證規(guī)則，始終會為其分配一個字段屬性，該屬性包含要驗證的字段名稱。
value 是校驗屬性的值。
callback 調(diào)用完成后調(diào)用的回調(diào)函數(shù)。
source 校驗的源對象。
options 其他選項。

傳遞給 validate 或 asyncValidate 的選項將傳遞給驗證函數(shù)，以便您可以在驗證函數(shù)中引用瞬態(tài)數(shù)據(jù)(例如模型引用)。但是，保留了一些選項名稱;如果使用選項對象的這些屬性，它們將被覆蓋。保留屬性包括消息、異常和錯誤。

3、Type

type ：指示要校驗的屬性類型，它的類型值有：

string - 默認值，屬性類型必須是字符串。
number - 必須是數(shù)字。
boolean - 是布爾值。
regexp - 是一個 RegExp 實例或 new RegExp 時不生成異常字符串
method - 必須是一個函數(shù)。
integer - 必須是數(shù)字和整數(shù)類型。
float - 必須是數(shù)字和浮點數(shù)。
array - 是數(shù)組，使用 Array.isArray 驗證。
object - 是一個對象而且不是數(shù)組對象。
enum - 值必須存在于枚舉中。
date - 值必須是由日期確定的有效值。
url - 是一個 url 類型。
hex - 十六進制。
email - 必須是 email 類型。
any - 可以為任意類型。

4、Required

required 屬性代表源對象上必須存在該字段。

5、Pattern

rule 屬性指示必須匹配正則表達式。

6、Range

通過使用 min(最小) 和 max(最大) 屬性定義一個范圍，對應(yīng)字符串和數(shù)組會與 length 比較，對于數(shù)字會直接拿值比較。

7、Length

會使用 len 屬性定義長度，對應(yīng)字符串和數(shù)組會與 length 比較，數(shù)字會直接拿值進行比較。如果 min、max 和 len 同時出現(xiàn)時，len 優(yōu)先使用。

8、Enumerable

enumerable 可枚舉值。對于可以枚舉出所有情況的類型，可使用枚舉校驗，如：

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

9、Whitespace

通常將僅包含空格的必填字段視為錯誤。要為僅由空格組成的字符串添加附加測試，請將whitespace屬性添加到值為true. 規(guī)則必須是string類型。

您可能希望清理用戶輸入而不是測試空格，請參閱 transform 以獲取允許您去除空格的示例。

個人使用 whitespace 之后，感覺沒有任何影響，官方講的也很簡單，未找到具體實例，如果有會用的，還請不吝賜教。

10、Deep Rules

如果需要校驗的數(shù)據(jù)類型是對象，且需要校驗對象中的每一個屬性，此時需要通過嵌套規(guī)則分配給 rules 的 fields 屬性來校驗屬于 object 或 array 類型的校驗規(guī)則。

對 object 的深度監(jiān)聽：

const rules = {
 address: {
 type: 'object',
 required: true,
 fields: {
  street: { type: 'string', required: true },
  city: { type: 'string', required: true }
  }
 }
}

注意：如果在父規(guī)則上沒有指定 required 屬性，此時沒有在源對象上聲明的字段也是有效的，但是深度監(jiān)聽會失效。

對 array 的深度監(jiān)聽：

const descriptor = {
  roles: {
    type: 'array',
    required: true,
    len: 3,
    fields: {
      0: { type: 'string', required: true },
      1: { type: 'string', required: true },
      2: { type: 'string', required: true },
    },
  },
};

提供 { roles: ['admin', 'user'] } 這樣的 source 對象，將創(chuàng)建兩個錯誤。一個用于數(shù)組長度不匹配，另一個用于缺少索引 2 處所需的數(shù)組。

11、defaultField

defaultField 屬性用來校驗內(nèi)部的所有值，可以用于 array 或 object 類型。

const descriptor = {
 urls: {
  type: 'array',
  required: true,
  defaultField: { type: 'url' },
 }
};

注意，若將 defaultField 擴展為fields，請參見 deep rules。

12、transform

有時校驗之前需要進行某種處理或者轉(zhuǎn)化，因此在校驗規(guī)則中添加 transform 函數(shù)，在校驗之前對屬性進行某種轉(zhuǎn)換，并重新分配給源對象以更改屬性的值。

const rules = {
 username: {
  type: 'string',
   required: true,
   pattern: /^[a-z]+$/,
   transform(value) {
    return value.trim();
   },
 },
}
const validator = new Schema(rules)
const source = { username: ' user  ' };
validator.validate(source).then(() => assert.equal(source.name, 'user'));

transform 函數(shù)內(nèi)的 value.trim() 會把傳入的值前后空格去掉，所以校驗成功，如果沒有 transfrom 函數(shù)，校驗將會失敗。

13、message

根據(jù)應(yīng)用的需求，可能需要 i18n 支持，或者您可能更喜歡不同的驗證錯誤消息。

最簡單的方法給 rule 分配一條 message 屬性：

const rules = {
 username: {
  type: 'string',
  required: true,
  message:"用戶名不能為空" 
 }
}

message 可以是任意類型，如 jsx 格式：

const rules = {
 username: {
  type: 'string',
  required: true,
  message:"用戶名不能為空" 
 },
}

message 也可以是一個函數(shù)，比如 vue-i18n ：

{ name: { type: 'string', required: true, message: () => this.$t( '請?zhí)顚懨Q' ) } }

不同語言可能需要相同的模式驗證規(guī)則，在這種情況下，為每種語言復(fù)制模式規(guī)則是沒有意義的。

在這種情況下，您可以為該語言提供自己的消息，并將其分配給 shema：

import Schema from 'async-validator';
const cn = {
  required: '%s 必填',
};
const descriptor = { name: { type: 'string', required: true } };
const validator = new Schema(descriptor);
// deep merge with defaultMessages
validator.messages(cn);

如果要定義自己的驗證函數(shù)，最好將消息字符串指定給messages對象，然后通過選項訪問消息。驗證函數(shù)中的messages屬性。

14、asyncValidator

為指定字段自定義異步校驗函數(shù)：

const rules = {
 username: [
  {
   type: 'string',
   required: true,
   whitespace: true,
   transform(value) {
   return value.trim()
   },
   message: '用戶名不能為空格',
   asyncValidator: (rule, value) => {
   return new Promise((resolve, reject) => {
    setTimeout(() => { //模擬異步操作
    if (value != '') {
     resolve()
    } else {
      reject('error')
    }
   }, 2000)
  })
 },
 ],
}
const validator = new Schema(rules)
const source = { username: ' user  ' };
validator.validate(source).then((res) => {
 console.log('res', res)
})
.catch(({ errors, fields }) => {
 console.log('err', errors)
 console.log('fields', fields)
})

15、validator

為指定字段自定義同步校驗函數(shù)：

const rules = {
 username: [
  {
   type: 'string',
   required: true,
   validator(rule, value) {
    return value != ''
    },
    message: '用戶名不能為空',
   },
   {
    type: 'string',
    min: 6,
    max: 10,
    validator(rule, value) {
      return rule.min < value.length && value.length < rule.max
     },
     message: '長度 6-8',
   },
 ],
}

常見問題

如何取消 warning：

import Schema from 'async-validator';
Schema.warning = function () {};

如果檢查布爾值true

使用 enum 類型并傳布爾值 true 參數(shù)作為選項。

{
  type: 'enum',
  enum: [true],
  message: '',
}

測試用例

npm test

測試覆蓋率

npm run coverage

打開 coverage/ dir。

文章標題：Async-Validator源碼學習：文檔翻譯
標題路徑：http://m.fisionsoft.com.cn/article/cdeeihs.html

新聞中心

一、從入門到上手

二、API 學習

1、validate

2、Rules

3、Type

4、Required

5、Pattern

6、Range

7、Length

8、Enumerable

9、Whitespace

10、Deep Rules

11、defaultField

12、transform

13、message

14、asyncValidator

15、validator