溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么使用JavaScript策略模式校驗(yàn)表單

發(fā)布時(shí)間：2021-04-29 14:05:52 來(lái)源：億速云 閱讀：114 作者：小新 欄目：開發(fā)技術(shù)

小編給大家分享一下怎么使用JavaScript策略模式校驗(yàn)表單，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

javascript是一種什么語(yǔ)言

javascript是一種動(dòng)態(tài)類型、弱類型的語(yǔ)言，基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性并廣泛用于客戶端網(wǎng)頁(yè)開發(fā)的腳本語(yǔ)言，同時(shí)也是一種廣泛用于客戶端Web開發(fā)的腳本語(yǔ)言。它主要用來(lái)給HTML網(wǎng)頁(yè)添加動(dòng)態(tài)功能，現(xiàn)在JavaScript也可被用于網(wǎng)絡(luò)服務(wù)器，如Node.js。

概述

Web項(xiàng)目中，登錄，注冊(cè)等等功能都需要表單提交，當(dāng)把用戶的數(shù)據(jù)提交給后臺(tái)之前，前端一般要做一些力所能及的校驗(yàn)，比如是否填寫，填寫的長(zhǎng)度，密碼是否符合規(guī)范等等，前端校驗(yàn)可以避免提交不合規(guī)范的表單。

假如我們有一個(gè)表單，校驗(yàn)邏輯如下：

  • 用戶名不為空

  • 密碼長(zhǎng)度不低于6位

  • 手機(jī)號(hào)符合格式

未使用策略模式的表單校驗(yàn)

當(dāng)沒(méi)有使用策略模式時(shí)，即我們首先會(huì)想到的校驗(yàn)?zāi)Ｊ酵ǔＪ沁@樣的：

<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('密碼長(zhǎng)度不能小于6位')
                return;
            }
            if(!/(^1[3|5|8][0-9]{9}$)/.test(form.phone.value)){
                alert('手機(jī)號(hào)格式不正確')
                return;
            }
        }
    </script>
</body>

這種代碼編寫方式十分常見(jiàn)，但它的缺點(diǎn)同樣很明顯：

  • onsubmit函數(shù)過(guò)于龐大，包含很多if-else，要覆蓋所有規(guī)則

  • onsubmit函數(shù)缺乏彈性，如果要進(jìn)入一種新的校驗(yàn)規(guī)則，就要改函數(shù)的內(nèi)容實(shí)現(xiàn)，違反開放-閉合原則

  • 代碼復(fù)用性較差，如果再寫一個(gè)表單，就要復(fù)制很多重復(fù)的代碼

使用策略模式優(yōu)化

首先封裝校驗(yàn)函數(shù)為一個(gè)對(duì)象：

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;
        }
    }
}

我們還要一個(gè)Validator類, 這個(gè)類用于向目標(biāo)表單添加驗(yàn)證規(guī)則，它的用法如下:

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

如代碼所示，validator實(shí)例有add方法，接收3個(gè)參數(shù)，第一個(gè)為需要驗(yàn)證的表單實(shí)例，第二個(gè)為驗(yàn)證方法，冒號(hào)后面為傳入的參數(shù)。第三個(gè)為驗(yàn)證未通過(guò)的錯(cuò)誤提示信息。

start方法，用于啟動(dòng)校驗(yàn)，如果沒(méi)通過(guò)會(huì)返回未通過(guò)的提示信息，可在之后的邏輯中進(jìn)行處理

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(",");
    }
}

使用策略模式，我們使用配置的方式完成了表單的校驗(yàn)，這些規(guī)則可以用在以后任何校驗(yàn)表單的地方，更方便修改與復(fù)用

為單一表單項(xiàng)增加多個(gè)驗(yàn)證規(guī)則

我們的代碼現(xiàn)在有一個(gè)缺點(diǎn)，就是只能為某一個(gè)表單項(xiàng)賦單一驗(yàn)證規(guī)則，無(wú)法實(shí)現(xiàn)一個(gè)表單多個(gè)驗(yàn)證規(guī)則，所以代碼還有優(yōu)化的空間

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: '密碼長(zhǎng)度不能少于6位'
    }]);
    validator.add(Form.phone, [{
        strategy: 'isMobile',
        errMsg: '手機(jī)號(hào)碼格式不正確'
    }, {
        strategy: 'empty',
        errMsg: '手機(jī)號(hào)不能為空'
    }]);
    const errMsg = validator.start();
    return errMsg;
}

只需要傳參時(shí)傳入一個(gè)對(duì)象數(shù)組，并在add函數(shù)里面添加相應(yīng)的數(shù)組處理邏輯即可

策略模式的優(yōu)點(diǎn)

優(yōu)點(diǎn)：

  • 避免多重條件選擇語(yǔ)句

  • 實(shí)現(xiàn)開閉原則，使得函數(shù)的使用更加易于切換，易于理解，易于擴(kuò)展。

  • 提高代碼復(fù)用程度

以上是“怎么使用JavaScript策略模式校驗(yàn)表單”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手