PipeValid.js 2.0 數據驗證

最新版本: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);
}

優勢

  1. 可複用的鏈式配置

    拋棄反鎖的if、else的操作,使用鏈式定義,驗證錯誤,其中的驗證函數,更是定義一次,就可反覆使用。

    valid.check("name")
    .max(10, "xx...");
  2. 實例可反覆使用

    同一個實例,同一份配置,調用不同的start,返回獨立的結果

    // 多個start,使用相同配置,進行多個驗證
    var result1 = valid.start({ name: "da宗熊" });
    var result2 = valid.start({ name: "da宗熊2" });
  3. 支持異步驗證

    驗證結果,返回一個簡單的 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
    });
  4. 內置常用驗證器

    • notEmpty: 非空
    • min: 最小值,接受兩個參數 valid.min(int, string);
    • max: 最大值,接受兩個參數 valid.max(int, string);
    • url: 鏈接
    • int: 整數
    • number: 數字
    • email: 郵件
  5. 良好的拓展

    自定義鏈式函數:

    // 定義新的驗證函數
    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"}
  6. 條件驗證

    只有滿足某種需求(判斷),才執行的驗證

    // 如果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函數可忽略。

  7. 支持屬性表達式

    如果你想驗證 “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]

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章