使用策略模式處理表單

時間 2019-11-24

標籤使用策略模式處理表單欄目 HTML 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="#" type="post" id="registerForm">
    用戶名:<input type="text" name="userName"/>
    密碼:<input type="password" name="password"/>
    手機號:<input type="text" name="phoneNumber"/>
    <button> 提交</button>
</form>
</body>
</html>

<script type="text/javascript">
    /* 對條件驗證字段(策略模式) */
    /* 定義策略對象. */
 var strategies = {
        isNonEmpty: function (value, errorMsg) {
            if (value === '') {
                return errorMsg;
            }
        },
        minLength: function (value, length, errorMsg) {
            if (value.length < length) {
                return errorMsg;
            }
        },
        isMobile: function (value, errorMsg) {
            if (!/(1[3|5|8][0-9]{9}$)/.test(value)) {
                return errorMsg;
            }
        }
    };
    /* 定義上下文 */

 var Validator = function () {
        this.cache = [];
    };
    /* 考慮能夠有多個驗證條件的狀況. */
 Validator.prototype.add = function (dom, rules) {
        var self = this;
        for (var i = 0, rule; rule = rules[i++];) {
            /*  注意這種寫法 */
 (function (rule) {
                var strategyAry = rule.strategy.split(":");
                var errorMsg = rule.errorMsg;
                self.cache.push(function () {
                    var strategy = strategyAry.shift();
                    strategyAry.unshift(dom.value);
                    strategyAry.push(errorMsg);
                    return strategies[strategy].apply(dom, strategyAry);
                });
            })(rule);
        }
    };

    Validator.prototype.start = function () {
        for (var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
            var errorMsg = validatorFunc();
            if (errorMsg) {
                return errorMsg;
            }
        }
    };

    /* 定義場景類  */
 var registerForm = document.getElementById('registerForm');
    var validataFunc = function () {

        var validator = new Validator();

        validator.add(registerForm.userName, [{strategy: 'isNonEmpty', errorMsg: '用戶名稱不能爲空'}, {
            strategy: 'minLength:6',
            errorMsg: '用戶名長度不能小於10位'
 }]);
        validator.add(registerForm.password, [{strategy: 'minLength:6', errorMsg: '密碼長度不能小於6位'}]);
        validator.add(registerForm.phoneNumber, [{strategy: 'isMobile', errorMsg: '手機號碼格式不正確'}]);
        var errorMsg = validator.start();
        return errorMsg;
    };


    /*   */
 registerForm.onsubmit = function () {
        var errorMsg = validataFunc();
        if (errorMsg) {
            alert(errorMsg);
            return false;
        }
    };


</script>