表單驗證請進!!!

Paul_King 發布于2019-08-19 17:22 / 1193人閱讀

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

策略者模式

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

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")); // "不能為空!"

完美~
屁~
仔細觀察不難發現,就是對一個輸入不能驗證多個內容. 那怎么滿足這個需求呢？還得寫一個檢測類，相當于代理。

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

恩恩，這應該可以了吧。
NO NO NO ~~~
你這只是一對多的驗證規則，當我要提交表單的時候，我還有其他的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 "檢測類型只能為數組";
    }
    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());   //["不能為空"]

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

GPU云服務器云服務器驗證表單表單驗證請進表單驗證代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78466.html

CrossPHP 1.5.8 發布了

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

shleyZ 2019-06-27 15:11 評論0 收藏0
Vue-book 2.0 一個移動端簡單的全棧 web APP

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

wh469012917 2019-06-27 16:37 評論0 收藏0
Vue-book 2.0 一個移動端簡單的全棧 web APP

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

NotFound 2019-08-20 16:53 評論0 收藏0
老板讓我十分鐘上手nx-admin

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

DevYK 2019-08-22 18:35 評論0 收藏0