JavaScript 戦略パターンを使用してフォームを検証する方法

<本文>
    <form id="登録フォーム">
        <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>
    </フォーム>
    <スクリプト>
        定数フォーム = document.querySelector('.registerForm');
        フォーム.onsubmit = 関数(){
            if(form.username.value === ''){
                アラート('ユーザー名は空にできません')
                戻る;
            }
            if(form.password.value.length < 6){
                警告('パスワードの長さは6文字未満にできません')
                戻る;
            }
            if(!/(^1[3|5|8][0-9]{9}$)/.test(form.phone.value)){
                警告('電話番号の形式が正しくありません')
                戻る;
            }
        }
    </スクリプト>
</本文>

定数戦略 = {
    空(値、エラーメッセージ){
        if(値の長さ === 0){
            errMsg を返します。
        }
    },
    minLength(値、長さ、エラーメッセージ){
        if(値の長さ < len){
            errMsg を返します。
        }
    },
    isMobile(値、エラーメッセージ){
        if(!/(^1[3|5|8][0-9]{9}$)/.test(値)){
            errMsg を返します。
        }
    }
}

const 検証 = 関数(){
    const バリデータ = 新しい Validator();
    validator.add(Form.userName, 'empty', 'ユーザー名は空にできません');
    validator.add(Form.password, 'minLength:6', 'パスワードの長さは6文字未満にすることはできません');
    validator.add(Form.phone, 'isMobile', '携帯電話番号の形式が正しくありません');
    errMsg を Validator.start() に設定します。
    errMsg を返します。
}

クラス Validator {
    コンストラクタ（）{
        このルールは、
    }
    要素、ルール、エラーを追加します。
        const args_arr = ルールを分割します(":");
        this.rules.push(()=>{
            const ハンドラ = args_arr.shift();
            args_arr.unshift(要素の値);
            args_arr.push(err);
            strategies[handler].apply(elem, args_arr) を返す
        })
    }
    始める（）{
        errmsg = [] とします
        for(let i = 0; i < this.rules.length; i++ ){
            定数err = this.rules[i]();
            もしエラーが起きたら
                errmsg.push(err)
            }
        }
        errmsg.join(","); を返します。
    }
}

クラス Validator{
    // ···
    add(要素、ルール){
        ルール.forEach(ルール => {
            const args_arr = ルール.strategy.split(":");
            this.rules.push(()=>{
                const ハンドラ = args_arr.shift();
                args_arr.unshift(要素の値);
                args_arr.push(rule.errMsg);
                strategies[handler].apply(elem, args_arr) を返す
            })
        });
    }
    // ···
}

const 検証 = 関数(){
    const バリデータ = 新しい Validator();
    validator.add(Form.username,[{
        戦略: '空'、
        エラーメッセージ: 'ユーザー名は空にできません'
    }]);
    validator.add(Form.password, [{
        戦略: 'minLength:6',
        errMsg: 'パスワードの長さは 6 文字未満にできません'
    }]);
    バリデーター.add(Form.phone, [{
        戦略: 'isMobile'、
        errMsg: '携帯電話番号の形式が正しくありません'
    }, {
        戦略: '空'、
        エラーメッセージ: '電話番号は空欄にできません'
    }]);
    errMsg を Validator.start() に設定します。
    errMsg を返します。
}