如何使用JavaScript策略模式校驗表單

Posted on by

概述

Web項目中，登錄，註冊等等功能都需要表單提交，當把用戶的數據提交給後臺之前，前端一般要做一些力所能及的校驗，比如是否填寫，填寫的長度，密碼是否符合規范等等，前端校驗可以避免提交不合規范的表單。

假如我們有一個表單，校驗邏輯如下：

  • 用戶名不為空
  • 密碼長度不低於6位
  • 手機號符合格式

未使用策略模式的表單校驗

當沒有使用策略模式時，即我們首先會想到的校驗模式通常是這樣的：

<body>
    <form id="registerForm">
        <label for="username">輸入用戶名：<input type="text" name="username"></label>
        <label for="password">輸入密碼：<input type="password" name="password"></label>
        <label for="phone">輸入密碼：<input type="text" name="phone"></label>
    </form>
    <script>
        const form = document.querySelector('.registerForm');
        form.onsubmit = function(){
            if(form.username.value === ''){
                alert('用戶名不能為空')
                return;
            }
            if(form.password.value.length < 6){
                alert('密碼長度不能小於6位')
                return;
            }
            if(!/(^1[3|5|8][0-9]{9}$)/.test(form.phone.value)){
                alert('手機號格式不正確')
                return;
            }
        }
    </script>
</body>

這種代碼編寫方式十分常見，但它的缺點同樣很明顯：

  • onsubmit函數過於龐大，包含很多if-else，要覆蓋所有規則
  • onsubmit函數缺乏彈性，如果要進入一種新的校驗規則，就要改函數的內容實現，違反開放-閉合原則
  • 代碼復用性較差，如果再寫一個表單，就要復制很多重復的代碼

使用策略模式優化

首先封裝校驗函數為一個對象：

const strategies = {
    empty(value, errMsg){
        if(value.length === 0){
            return errMsg;
        }
    },
    minLength(value, len, errMsg){
        if(value.length < len){
            return errMsg;
        }
    },
    isMobile(value, errMsg){
        if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){
            return errMsg;
        }
    }
}

我們還要一個Validator類, 這個類用於向目標表單添加驗證規則，它的用法如下:

const validate = function(){
    const validator = new Validator();
    validator.add(Form.userName, 'empty', '用戶名不能為空');
    validator.add(Form.password, 'minLength:6', '密碼長度不能少於6位');
    validator.add(Form.phone, 'isMobile', '手機號碼格式不正確');
    const errMsg = validator.start();
    return errMsg;
}

如代碼所示，validator實例有add方法，接收3個參數，第一個為需要驗證的表單實例，第二個為驗證方法，冒號後面為傳入的參數。第三個為驗證未通過的錯誤提示信息。

start方法，用於啟動校驗，如果沒通過會返回未通過的提示信息，可在之後的邏輯中進行處理

Validator類的編寫:

class Validator {
    constructor(){
        this.rules = [];
    }
    add(elem, rule, err){
        const args_arr = rule.split(":");
        this.rules.push(()=>{
            const handler = args_arr.shift();
            args_arr.unshift(elem.value);
            args_arr.push(err);
            return strategies[handler].apply(elem, args_arr)
        })
    }
    start(){
        let errmsg = []
        for(let i = 0; i < this.rules.length; i++ ){
            const err = this.rules[i]();
            if(err){
                errmsg.push(err)
            }
        }
        return errmsg.join(",");
    }
}

使用策略模式，我們使用配置的方式完成瞭表單的校驗，這些規則可以用在以後任何校驗表單的地方，更方便修改與復用

為單一表單項增加多個驗證規則

我們的代碼現在有一個缺點，就是隻能為某一個表單項賦單一驗證規則，無法實現一個表單多個驗證規則，所以代碼還有優化的空間

class Validator{
    // ···
    add(elem, rules){
        rules.forEach(rule => {
            const args_arr = rule.strategy.split(":");
            this.rules.push(()=>{
                const handler = args_arr.shift();
                args_arr.unshift(elem.value);
                args_arr.push(rule.errMsg);
                return strategies[handler].apply(elem, args_arr)
            })
        });
    }
    // ···
}

const validate = function(){
    const validator = new Validator();
    validator.add(Form.username,[{
        strategy: 'empty',
        errMsg: '用戶名不能為空'
    }]);
    validator.add(Form.password, [{
        strategy: 'minLength:6',
        errMsg: '密碼長度不能少於6位'
    }]);
    validator.add(Form.phone, [{
        strategy: 'isMobile',
        errMsg: '手機號碼格式不正確'
    }, {
        strategy: 'empty',
        errMsg: '手機號不能為空'
    }]);
    const errMsg = validator.start();
    return errMsg;
}

隻需要傳參時傳入一個對象數組，並在add函數裡面添加相應的數組處理邏輯即可

策略模式的優點

優點：

  • 避免多重條件選擇語句
  • 實現開閉原則，使得函數的使用更加易於切換，易於理解，易於擴展。
  • 提高代碼復用程度

總結

Peter Norvig說過，在函數作為一等對象的語言中，策略模式是隱形，strategy就是值為函數的變量。其實就是將封裝好的策略函數當成參數傳給使用它的target，被target調用的過程，用好策略模式，不僅讓我們對該模式有更加深刻的理解，也使我們明白使用函數的好處。

以上就是如何使用JavaScript策略模式校驗表單的詳細內容，更多關於JavaScript資料請關註WalkonNet其它相關文章！

推薦閱讀：