通用的驗證模組

Aitter發表於2016-12-18

分享一個新鮮出爐的驗證模組，用各種環境的規則驗證，結合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

相關文章