最新版本:2.0.0
優勢:把繁瑣的數據驗證,簡化爲簡單的鏈式配置
項目地址: https://github.com/linfenpan/PipeValid
可用在web端,script引入、amd/cmd引入,都可以,
或通過 npm install pipe-valid 安裝到 node 項目
小例子
看兩個小例子,感受一下PipeValid的魅力
普通的驗證:
var name = "da宗熊";
var error = "";
if ( name.trim() === "") {
error = "名字不能爲空";
} else if (name.length > 20) {
error = "名字長度不能超過20";
} else if (name.length < 2) {
error = "名字不能小於2位";
}
if (error) {
alert(error);
}
而使用了 PipeValid 後,你只需
var valid = new PipeValid();
valid.check("name")
.notEmpty("名字不能爲空")
.max(20, "名字長度不能超過20")
.min(2, "名字不能小於2位")
.check("text")
.notEmpty("文本不能空")
.check("url")
.url("請正確填寫鏈接");
valid.start({ name: "da宗熊", text: "xx", url: "" });
if(!result.pass){
alert(result.error);
}
優勢
可複用的鏈式配置
拋棄反鎖的if、else的操作,使用鏈式定義,驗證錯誤,其中的驗證函數,更是定義一次,就可反覆使用。
valid.check("name") .max(10, "xx...");
實例可反覆使用
同一個實例,同一份配置,調用不同的start,返回獨立的結果
// 多個start,使用相同配置,進行多個驗證 var result1 = valid.start({ name: "da宗熊" }); var result2 = valid.start({ name: "da宗熊2" });
支持異步驗證
驗證結果,返回一個簡單的 promise/a 規範的對象,支持異步驗證
valid.check('name') .define(function(val) { return new Promise(function(resolve, reject) { setTimeout(function() { if (val.indexOf('bad') >= 0) { reject(); } else { resolve(); } }, 1000); }, '名字裏,不能含有"bad"關鍵字'); }); var result = valid.start({ name: 'da宗熊' }); result.always(function() { // 如果 check 列表中,含有異步函數 // 需要在此處,才能獲取到正確的結果 // result.pass/result.error/result.key/result.index });
內置常用驗證器
- notEmpty: 非空
- min: 最小值,接受兩個參數 valid.min(int, string);
- max: 最大值,接受兩個參數 valid.max(int, string);
- url: 鏈接
- int: 整數
- number: 數字
- email: 郵件
良好的拓展
自定義鏈式函數:
// 定義新的驗證函數 PipeValid.define("isBear", function(val){ return val === "bear"; }); // 使用新的鏈式函數 valid.check("bear") .notEmpty("bear字段不能爲空") .isBear("bear必須是bear!"); valid.start({ bear:"xx" }); // ⇒ { pass: false, key: "bear", error: "bear必須是bear!" }
新的isBear鏈式函數,第1個參數,永遠是需要被驗證的值。
自定義驗證函數:
valid.check("min") .define(function(val){ return +val >= 3; }, "min最小是3"); valid.start({min: 1}); // ==> {attr: "min", error: "min最小是3"}
條件驗證
只有滿足某種需求(判斷),才執行的驗證
// 如果url的值不爲空,則驗證它是否鏈接;爲空,則什麼都不幹 valid.check("url") .notEmpty() .then() .url("輸入必須是鏈接") .end(); valid.start({ url: "" }); // ⇒ {pass: true} valid.start({ url: "xxyy" }); // ⇒ { pass: false, key: "url", error: "輸入必須是鏈接" }
使用了then之後,之前添加的函數,則會轉化爲驗證前的條件,而end則是then函數的結束。
如果本次check操作,沒有後續的驗證,end函數可忽略。
支持屬性表達式
如果你想驗證 “data.code” 或 “list[1].name” 這種表達式,PipeValid 可以幫到你。
var valid = new PipeValid(); valid.check('data.code') .int('code必須是整型'); var result = valid.start({ data: { code: '789d' } }); result.pass === false;
API
PipeValid
1、check(name: String|Object)
返回一個 Item
實例,該實例擁有定義的所有驗證方法
var pipe = new PipeValid();
var checker = pipe.check('name');
checker.min(3, '名字最短3位');
如果參數,是一個對象,則調用 rule
方法
name如果是字符串,支持屬性表達式的寫法:
pipe.check('data.code'); // 檢測 data 的 code 屬性
pipe.check('list[].name'); // 檢測 list 列表中,所有子項的 name 屬性
pipe.check('list[0].name'); // 檢測 列表 的第 1 位子項的 name 屬性
pipe.check('[].name'); // 檢測該列表的所有 name 屬性
所以說,屬性名字,千萬別包含”[].”哦~~。
2、rule(checkList: Object)
以數組形式,配置驗證器
pipe.rule({
// 多個驗證規則,同時也支持 then 和 end 方法
name: [
['notEmpty', '不能爲空'],
['min', 3, '最少3位']
],
// 單個驗證規則
age: ['int', '必須是整數']
});
規則的配置形式如下:
[name: String|Function, 驗證參數1...?, error: String|Object]
可有多個驗證參數,不過數量,要嚴格等於驗證函數的參數數量減一
3、define(name: String, fn: Function)
在 Checker
增添新的驗證方法
PipeValid.define('isBear', function(value){
return value === 'bear';
});
checker.isBear('必須是bear!');
PipeValid.define 等價於 pipe.define,只是 pipe.define 之後,繼續返回 this 對象
4、start(data: Object, restrict: Array?, isCheckAll: Boolean?)
- data是需要驗證的對象,
- restrict是規定,本次驗證,使用哪些 checker,字符串數組哦
isCheckAll,本次驗證,是否返回所有錯誤?result.error將會是數組
該方法,總是返回一個 Thenable 對象,有 then/always/catch 方法。
如果執行的所有checker,都沒有異步檢測,結果將會是同步返回,
如果有異步的檢測,結果同樣會異步返回。var pipe = new PipeValid(); // 假設 noneBadword 是異步驗證 pipe.check('name') .min(3, '名字最短3個字') .noneBadword('不能含有非法關鍵字'); var result = pipe.start({ name: 'da宗熊' }); result.pass // undefined,因爲需要等待 noneBadword 的執行 result.always(function() { result.pass // 得到最終的結果 });
注意:
如果定義了 check(‘name’),但是,在 start({ age: 1 }) 中,又不含有 name 屬性,那麼 name 屬性的檢測,將會被忽略。
如果一定要驗證,請指定 restrict 列表,start({ age: 1 }, [‘name’, ‘age’]),有 restrict 列表,則只會驗證列表指定的內容,同時,如果發現內容不存在,也會拋出設定的錯誤。
PipeValid.Item
當 PipeValid 實例,調用 check(String) 方法時,將返回一個 Item 對象
1、內置驗證
- max(len: Int, error: String|Object)
- min(len: Int, error: String|Object)
- url(error: String|Object)
- int(error: String|Object)
- email(error: String|Object)
- notEmpty(error: String|Object)
所有 Item 實例,都默認擁有上面全部驗證方法
2、define(fn: Function, 參數2?, 參數3?, error: String|Object)
自定義錯誤驗證,其中驗證函數 fn 的第1個參數,必定是需要驗證的值
pipe.check('word')
.define(function(val, parm1, params) {
// 返回 true -> 驗證通過
// 返回 false -> 驗證不通過
// 返回 promise 對象,如果是 reject 不通過,resolve 則通過
// promise對象的 reject 如果附帶參數,則會把 error 覆蓋掉!!!
}, 'param1', 'param2', 'error text');
其中,如果自定義的函數,只有 val 一個參數,那麼對應的,”參數2?, 參數3?” 則不該存在
3、then() 和 end()
then, 把前面鏈條中的所有方法,更變爲驗證生效的條件。
end, 結束本次 then 操作
// 如果當前的值,不爲空,纔去驗證 url 是否鏈接
pipe.check('url').notEmpty()
.then()
.url('必須是鏈接');
// 如果 text 大於20,則驗證是否連接,否則判定 text 是否整數
pipe.check('text')
.min(20)
.then()
.url('text必須是鏈接')
.end()
.int('請輸入整數');
4、check(Name: String)
調用父親的check方法
5、custom(fn: Function(val, next: Function))
完全自定義的驗證,fn中的this上下文,被更改爲一個擁有當前所有驗證器的對象。
/*
max 驗證其定義如下:
max: function(val, len){
val = "" + val;
return val && val.length <= len;
}
*/
pipe.check('name')
.custom(function(val, next) {
// 判定當前 val 長度小於等於10
if (this.max(10)) {
// 執行是否整數的驗證
if (!this.int()) {
// 往外拋出錯誤
next('輸入必須是整數');
}
}
// 沒有錯誤,通知繼續執行
next();
});
在 custom 的函數裏,this 方法調用的所有 驗證器,都默認綁定了 val 的參數。
如果在 this 的驗證函數中,設置了錯誤,那麼,該驗證錯誤時,立刻中斷函數的執行,拋出錯誤。
但是,如果是異步驗證函數,則需要在其發生 reject 時,才能中斷,所以要小心處理異步函數了。
上述代碼,等價於
pipe.check('name')
.custom(function(val, next) {
// 判定當前 val 長度小於等於10
if (this.max(10)) {
// 執行是否整數的驗證,如果不是整型,則拋出錯誤
this.int('輸入必須是整數');
}
// 沒有錯誤,通知繼續執行
next();
});
PipeValid.Thenable
一個仿 Promise 的對象,只提供了 reject/resolve/then/always/catch 方法
var thenable = new Thenable();
thenable.resolve(1);
thenable.then(function(data) {
console.log(data); // 1
})
.then(function(data) {
console.log(data); // undefined
return {};
})
.then(function(data) {
console.log(data); // {}
});
聯繫
有BUG,or 興趣的,可以聯繫,企鵝郵箱: [email protected]