成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

表單驗證請進(jìn)!!!

Paul_King / 1203人閱讀

摘要：每一個項目，都要重寫驗證規(guī)則，驗證邏輯，那感覺簡直想屎。自從遇見了策略者模式，產(chǎn)經(jīng)你不是要加驗證嗎沒問題。這個驗證規(guī)則不行，替換沒問題。你這只是一對多的驗證規(guī)則，當(dāng)我要提交表單的時候，我還有其他的都需要驗證呢。

策略者模式

還在為你表單驗證頭疼嗎？還在為產(chǎn)經(jīng)無理取鬧，要你每個輸入框都加驗證而感到煩惱嗎？還在忙于復(fù)制粘貼驗證規(guī)則而感到厭煩嗎？ 那么策略者模式是最適合你的。
What are u talking about?
上面其實是我的切身體會，我也相信有許許多多的font-end踩過這個坑。每一個項目，都要重寫驗證規(guī)則，驗證邏輯，那感覺簡直想屎。自從遇見了策略者模式，產(chǎn)經(jīng)你不是要加驗證嗎？沒問題。 這個驗證規(guī)則不行，替換~ 沒問題。這里需要多加一個驗證規(guī)則，沒問題。
我想我們以前寫代碼會是這樣的

var username = document.querySelector("username").value;
var reg = /w+/;
if(username.length===0||username==null){
    alert("用戶名不能為空!");
}else if(!reg.test(username)){
    alert("用戶名格式不正確!");
}
...

這種書寫不是不好，只是重用性...so bad.
我們來看看策略者模式怎樣寫的。
首先驗證部分

var validate = (function(){
    var instructions = {
        notEmpty:"不能為空!",
        isPhone:"手機號不正確!"
    };
    var types = {
        notEmpty:function(value){
            if(value==null||value.length===0){
                return false;
            }
            return true;
        },
        isPhone:function(value){
            var reg = /d+/;
            if(reg.test(value)){
                return true;
            }
            return false;
        }
    }
    return function(value,type){ //type為檢測類型,value為檢測的值
        if(!types[type]){
            throw "檢測類型不存在";
        }
        if(!types[type](value)){
            return instructions[type];
        }
        return false;
    }
})();
//測試
console.log(validate("","notEmpty")); // "不能為空!"

完美~
屁~
仔細(xì)觀察不難發(fā)現(xiàn),就是對一個輸入不能驗證多個內(nèi)容. 那怎么滿足這個需求呢？ 還得寫一個檢測類，相當(dāng)于代理。

//返回多個檢測的結(jié)果，如果驗證都通過則返回空的數(shù)組
var detect = function(value,types){
    var result = [];
    if(!(types instanceof Array)){  //這里只是做類型檢測，萬一手賤輸錯了就不好了
        throw "檢測類型需要為數(shù)組不正確";
    }
    for(var type of types){
        var msg = validate(value,type);
        if(msg){  //如果信息存在
            result.push(msg);
        }
    }
    return result.length?result:false;
}
console.log(detect("",["notEmpty"]));

恩恩，這應(yīng)該可以了吧。
NO NO NO ~~~
你這只是一對多的驗證規(guī)則，當(dāng)我要提交表單的時候，我還有其他的value都需要驗證呢。你有沒有多對多的檢測類。
有的，客官~
//總的代碼如下，如果有興趣可以拷貝測試一下。

var validate = (function(){
    var instructions = {
        notEmpty:"不能為空!",
        isPhone:"手機號不正確!"
    };
    var types = {
        notEmpty:function(value){
            if(value==null||value.length===0){
                return false;
            }
            return true;
        },
        isPhone:function(value){
            var reg = /d+/;
            if(reg.test(value)){
                return true;
            }
            return false;
        }
    }
    return function(value,type){ //type為檢測類型,value為檢測的值
        if(!types[type]){
            throw "檢測類型不存在";
        }
        if(!types[type](value)){
            return instructions[type];
        }
        return false;
    }
})();
var Detect = function(){
    this.result = [];
}
Detect.prototype.add = function(value,types){
     if(!(types instanceof Array)){
        throw "檢測類型只能為數(shù)組";
    }
    for(var type of types){
        var msg = validate(value,type);
        if(!!msg){
            this.result.push(msg);
        }
    }
}
Detect.prototype.getResult = function(){
    var result = this.result;
    return result.length?result:false;
}
var detect = new Detect();
detect.add("",["notEmpty"]);  //添加值的驗證
detect.add(123,["isPhone"]);  //添加另外一個值的驗證
console.log(detect.getResult());   //["不能為空"]

恩~ 可以了~
如果大家領(lǐng)悟的話，可以自己寫一個策略者模式的表單檢測。前端最好的學(xué)習(xí)方式就是看書加實踐(造輪子).
如果還沒的話，那就收藏下，萬一哪天想通了呢？

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78466.html

相關(guān)文章

  • CrossPHP 1.5.8 發(fā)布了

    摘要：更新說明優(yōu)化提升接口開發(fā)體驗集成參數(shù)驗證及接口測試文檔自動生成一設(shè)置文檔標(biāo)題設(shè)置文檔頭部標(biāo)題和版本號一個項目只定義一次即可二為類設(shè)置名稱默認(rèn)文檔左側(cè)導(dǎo)航類的名稱定義在類的注釋中三接口定義在方法體定義獲取框架當(dāng)前版本號由三部分組成允許訪問的請 1.5.8 更新說明 Skeleton優(yōu)化 提升接口開發(fā)體驗, 集成參數(shù)驗證及接口測試文檔自動生成 一, 設(shè)置文檔標(biāo)題 @cp_doc_info...

    shleyZ 評論0 收藏0

  • Vue-book 2.0 一個移動端簡單的全棧 web APP

    摘要：本項目是一個簡單的全棧項目，前端新手可以拿來練練手。項目實現(xiàn)了一些簡單的功能，后臺可以對圖書進(jìn)行錄入錄出掃碼或手動，前臺顯示錄入的圖書，并且前臺注冊登錄后可以將書的訂單發(fā)給服務(wù)器，并存到服務(wù)器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【覺得不錯就來個 star 吧 ^_^】 說明（菜鳥請進(jìn)，大神繞道 ~） 前端...

    wh469012917 評論0 收藏0

  • Vue-book 2.0 一個移動端簡單的全棧 web APP

    摘要：本項目是一個簡單的全棧項目，前端新手可以拿來練練手。項目實現(xiàn)了一些簡單的功能，后臺可以對圖書進(jìn)行錄入錄出掃碼或手動，前臺顯示錄入的圖書，并且前臺注冊登錄后可以將書的訂單發(fā)給服務(wù)器，并存到服務(wù)器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【覺得不錯就來個 star 吧 ^_^】 說明（菜鳥請進(jìn)，大神繞道 ~） 前端...

    NotFound 評論0 收藏0

  • 老板讓我十分鐘上手nx-admin

    摘要：我就是一游客系統(tǒng)獲取我的信息拿到權(quán)限值動態(tài)加載路由通行不是。。我是權(quán)限汪等等我看看作者有沒有把你降級沒有好了。。你還是權(quán)限汪請進(jìn)有滾吧你已經(jīng)不是權(quán)限汪了作者已經(jīng)把你寫成戰(zhàn)斗力只有的渣渣了沒有沒有還敢闖這里滾去關(guān)口沒錯，就這么簡單。 大體流程 參考資料: nx-admin項目地址 首先這里就不講解vue和vuex之類的基礎(chǔ)東西了 有興趣的可以去官方文檔了解。這里根據(jù)流程走向大概說說 路由...

    DevYK 評論0 收藏0

發(fā)表評論

0條評論

Paul_King

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<