通用的驗證模塊

分享一個新鮮出爐的驗證模塊，用各類環境的規則驗證，結合React或Vue作到無侵入式驗證，作純數據驗證，不操做相關DOM與事件註冊，規則配置方便，簡單易用。

使用過不少的驗證插件，老是沒有一個特別讓我滿意，要麼規則配置複雜，要麼樣式更改麻煩，這種大而全的框架在特定的環境下是頗有用的，能夠幫忙節省大量時間，可在一些定製性要求高的場景下，卻老是不夠靈活，依賴各類環境和框架，因而，仍是來本身動手封裝一個簡單的工具吧。

下面是這個工具的介紹和使用：

依賴ES6的 Promise，若是須要低版本瀏覽器支持，請使用 dist/lite-validator-es5.js

安裝

npm install lite-validator --save複製代碼

ES6 引用

import { validForm, validValue, validField } from 'lite-validator'複製代碼

AMD 引用

var liteValidator = require('lite-validator');
validForm = liteValidator.validForm;
validValue = liteValidator.validValue;
validField = liteValidator.validField;複製代碼

瀏覽器引用

<script src="../lite-validator/dist/lite-validator-es5.js" type="text/javascript">

<script> window.liteValidator.validForm window.liteValidator.validValue window.liteValidator.validField </script>複製代碼

API

極簡的API，記住下面這三個API，走遍天下，驗證我不怕😏

• validForm 驗證整個 表單
• validField 驗證單個 字段
• validValue 驗證單個 數值

validValue

作純數據的驗證，返回 true 或 false

validValue(value, ruleName, pms) 或 validValue.ruleName(value, pms)

value 數值
ruleName 規則名稱
pms 規則的參數，能夠是多個，具體參數見下面的默認規則

validValue.required(' ')//false
validValue.qq('123')//false
validValue.phone('1761231221')//false
validValue.email('1761231221')//false
validValue.Length('1761231221', '~5')//false 因爲length與函數的length衝突，這裏將首字母大寫，暫時只有這一個規則是大寫
validValue.range('3', '1~5')//true 默認轉換爲數值類型
···複製代碼

validField

用於表單中 單個字段 的驗證，能夠 組合 多種規則，異步驗證 某個字段

validField (formEl, field, rules)

formEl 表單的DOM對象
field 能夠是字段的 name 名稱，也能夠是字段的DOM對象
rules 規則數組

let i = 0;
validField(formEl, 'name', [
    ['required'],
    [(el)=>{
     window.timmerx = setInterval(()=>console.log(++i), 1000);
     return new Promise((r,j)=>{
      setTimeout(()=>{r(el.value); clearInterval(window.timmerx)}, 3000);
     })}
    ]
  ])
.then(res =>{
  console.log('驗證經過:'+res)
})
.catch(err =>{
  console.log(err.msg || '')
})複製代碼

validForm

用於驗證整個表單，默認是遇到驗證失敗時就中止驗證

validForm(formEl, fieldsRules, validAll)

formEl 表單DOM對象
fieldRules 全部字段的驗證配置
validAll 是否一次性驗證全部字段

//逐個驗證，遇到錯誤時，中止驗證，經常使用於移動端表單驗證
validForm(oFormBox, {
  'uName':[['required'],['length:~10','字符長度過長，請小於10個字符']],
  'uAge': [['required'],['range:25~40','請輸入25至40週歲']],
  'uEmail': [['required'],['email']],
  'uBirthday': [['required'],['date']],
  'invalicode': [['required']],
  'uPwd': [['required'],['password']],
  'rePwd': [['required'],['match:uPwd','與密碼輸入不一致']],
  'address': [['required'],['chinese']],
  'city': [['required'],['checked:1~','至少選擇1項']],
})
.then(res=>console.log(res))
.catch(err=>{
    if(err instanceof Error) throw err;
    console.log(err.msg);
})

// 一次性驗證全部字段，經常使用於PC端表單驗證
validForm(oFormBox, {
  'uName':[['required'],['length:~10','字符長度過長，請小於10個字符']],
  'uAge': [['required'],['range:25~40','請輸入25至40週歲']],
  'uEmail': [['required'],['email']],
  'uBirthday': [['required'],['date']],
  'invalicode': [['required']],
  'uPwd': [['required'],['password']],
  'rePwd': [['required'],['match:uPwd','與密碼輸入不一致']],
  'address': [['required'],['chinese']],
  'city': [['required'],['checked:1~','至少選擇1項']],
}, true)
.then(res=>{
  console.log(res)
})
.catch(err=>{
  console.log(err)
})複製代碼

驗證成功
返回成功字段的驗證信息
若是是遇到錯誤就中止，則返回一個對象 {el:inputObj, field:fieldName}
若是是一次性驗證全部字段，則返回這個對象組成的數組

驗證失敗
若是在驗證過程當中失敗，出現異常，則返回異常對象
若是是驗證規則失敗，則返回，失敗的字段信息對象 {el:inputObj, msg:errmsg, field:fieldName}
若是是一次性難全部字段，則返回這個對象組成的數組

內置規則

經常使用正則

必填項

• required 字段必填

整數

• integer 整數
• integer(+) 正整數
• integer(+0) 正整數和零
• integer(-) 負整數
• integer(-0) 負整數和零

長度

• length(n) 請填寫 n 個字符
• length(n~) 請至少填寫 n 個字符
• length(~n) 請最多填寫 n 個字符
• length(n1~n2) 請填寫 n1 到 n2 個字符

選擇數量 Checkbox

• checked 必選
• checked(n) 必選 n 項
• checked(n~) 至少選擇 n 項
• checked(~n) 最多選擇 n 項
• checked(n1~n2) 選擇 n1 到 n2 項

選擇範圍

• range(n~) 請填寫不小於 n 的數
• range(~n) 請填寫不大於 n 的數
• range(n1~n2) 請填寫 n1 到 n2 的數

過濾

• filter 過濾 <>"'\ 和字符實體編碼的字符

過濾隱藏字段和禁用字段

在驗證表單時，會先過濾出配置的字段中，不是隱藏或禁用的字段，禁用的字段主要判斷，主要判斷該表單控件是否有屬性 disabled 或 class disabled

自定義規則與提示

在表單驗證中，能夠配置組合多個驗證規則，能夠配置驗證失敗的錯誤提示，若是不設置，也可使用默認規則中的配置的提示信息， 若是默認配置中沒有，則取該字段的 placeholder

'uName':[
      ['required', '請輸入姓名1'],
      ['length:2~5', '字符數2到5個'],
      ['integer:+'],
      ['range:1~3', '大於1小於等於3'],
      ['checked:1~', '至少選擇1個'],
      ['match:pwd', '和pwd這個字段值必須相同'],
      [/^[Α-￥]+$/, '請輸入中文字符'],
      [()=>{return Promise.resolve(1)}, '名稱已經存在了']複製代碼

提示的優先級

自定義的提示 > 默認規則的配置 > placeholder

CodePen示例

See the Pen KNrmWQ by LT (@togglelt) on CodePen.

源碼

Github倉庫 歡迎來給我提ISSUES