策略模式-2.表单验证2 

<!DOCTYPE html>
<html>
<head>
    <title>demo2</title>
</head>
<body>
    <form action="http:// xxx.com/register" id="registerForm" method="post">
        请输入用户名：<input type="text" name="userName"/ >
        请输入密码：<input type="text" name="password"/ >
        请输入手机号码：<input type="text" name="phoneNumber"/ >
        <button>提交</button>
    </form>
</body>
<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;
            }
        }
    };

    /***********************Validator 类**************************/
    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(':'),
                    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 validatorFunc = function () {
        var validator = new Validator();
        validator.add(registerForm.userName, [{
            strategy: 'isNonEmpty',
            errorMsg: '用户名不能为空'
        },{
            strategy: 'minLength:10',
            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 = validatorFunc();
        if (errorMsg) {
            console.log(errorMsg);
            return false;
        }
    }    
</script>
</html>

 

posted @ 2017-07-03 13:47  流年之外天空蓝  阅读(187)  评论(0)    收藏  举报