Validate-Chain

表單驗證鏈，以及中文驗證錯誤反饋信息

Motivation 為啥要寫這個工具？

以NODE作為后端開發單頁應用時，前后端對表單的驗證的邏輯和返回的提示信息其實是一樣的，應該做到前后端共用驗證邏輯，在React應用中這一點就更重要了。目前后端可以使用的koa-validate,express-validate等驗證util又不能在前端使用，而且似乎目前還沒有一個是中文提示信息的，于是就決定自己寫一個前后端共用的鏈狀驗證器。驗證器去檢查多個字段并在最后返回一個提示信息的數組，已經消毒后的數據；

之前在angular項目中這樣寫過

重復的if return, 以及大量的錯誤提示信息。。。。。

validator.loginForm = ({credential,password,email}) => {
    if( !credential ) return err("手機號或者Email地址，你忘了吧");
    if( !password ) return err("你是不是忘了填寫密碼了");
    if( /emailRegx/.test(email)) return err("這個不是Email地址。。。")
    ....
    .... blah blah blah

    var san = {credential,password};
    return { san }
}

function err( msg ){
    return { verr:msg }
}

使用 Validate-Chain

import VC from "validate-chain";

var objectData = {age:22,name:"eisneim",gender:"guy",email:"ss.kjk"}
validator.loginForm() => {  
    var vc = new VC( objectData )
    vc.check("email").email()
    vc.check("desc").alias("描述").required()
    vc.check("opt").optional().max(2,"must not bigger than 2");
    vc.check("name").required("名字為必填項");
    vc.check("age").required().min(23).numeric().in([22,33,44])//可以一直鏈下去
    vc.check("gender").alias("性別").regx(/male|female/).in(["男","女"])


    console.log( vc.errors )
    //["描述: 為必填字段", "age: 最小值為23", "性別: 不合格/male|female/的格式", "ss.kjk不是常規的email"]
    console.log( vc.sanitized )
    // {name: "eisneim"}
}

瀏覽器中使用

bower install --save validate-chain

<script src="路徑/validate-chain-browser.js"></script>

// VC 為全局變量
var vc = new VC( objectData )
vc.check("name").required("名字為必填項");
//console.log( vc.errors )

安裝

npm install --save validate-chain

// es5
var VC = require("validate-chain")

// es6
import VC form "validate-chain"

開發

// 測試
gulp test

// build
gulp build

API

• check(key) 以它作為開始
• errors 檢查完后，讀取這個屬性即可獲取所有的錯誤提示
• sanitized 檢查完后讀取這個屬性即可獲得消毒后的屬性
• alias(name) 如果設置了別名，錯誤信息將以這個別名開始
• required([tip]) 必填，大部分情況下需要在鏈中指明，
• optional() 可選，大部分情況下需要在鏈中指明，
• between(min,max,[tip]) 如果value是字符串則比較長度，數字則比較大小
• max(number,[tip]) 如果value是字符串則比較長度，數字則比較大小
• min(number,[tip]) 如果value是字符串則比較長度，數字則比較大小
• regx( /regx/,[tip] ) 傳入正則表達式對象，或者字符串的正則：\w.?end$不加首尾的/
• date(dateString,[tip]) 是否為時間格式
• before(dateString,[tip]) 時間在dateString之前
• after(dateString,[tip]) 時間在dateString之后
• in(Array,[tip]) 在一個數組值之一
• email([tip],[options]) options: allow_display_name:false 是否匹配 “姓名 ”; allow_utf8_local_part:true 是否限定只能使用英文字母和數字；
• JSON([tip]) 是否是格式沒有錯誤的JSON
• URL([tip],[options]) 檢查是否是正常的URL，options: protocols: ['http','https','ftp']指定可以用的協議， require_protocol:false 是否可以不用指定協議
• phone([tip]) 檢查手機號
• numeric([tip]) 檢查是否為數字
• float([tip]) 是否為浮點數
• alpha([tip]) 是否為純字母
• alphanumeric([tip]) 是否為字母+數字
• ascii([tip]) 是否是ascii 碼
• objectId([tip]) 是否為Mongodb ObjectID
• base64([tip]) 是否為base64格式字符串編碼
• creditCard([tip]) 是否為信用卡
• currency(options,[tip]) 是否為貨幣，默認值：{symbol: '￥', require_symbol: false, allow_space_after_symbol: false, symbol_after_digits: false, allow_negatives: true, parens_for_negatives: false, negative_sign_before_digits: false, negative_sign_after_digits: false, allow_negative_sign_placeholder: false, thousands_separator: ',', decimal_separator: '.', allow_space_after_digits: false }. -

sanitizers 消毒器

// data = { name:"  小明 "}
vc.check("name").required("名字為必填項").trim();

console.log( vc.sanitized ) // {name:"小明"}

• trim() 去掉首尾空格
• escape() 將<, >, &, ', " /替換為HTML編碼
• whitelist(chars) 白名單 eg. whitelist("a-zA-Z") 將會變成：replace(/[^a-zA-Z]/g,"")
• blacklist(chars) 黑名單 eg. whitelist("被和諧|不和諧|查水表") 將會變成：replace(/[被和諧|不和諧|查水表]/g,"")
• toBoolean([strict])
• toDate() 轉換為日期對象
• toFloat() 浮點數
• toInt([radix]) 整數，radix為進制
• toString() 轉換為字符串

項目主頁：http://www.baiduhome.net/lib/view/home/1442992172732