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

<!DOCTYPE html>
<html>
<head>
    <title>策略模式表单验证</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">
    //目标：实现几条验证逻辑
       /*用户名不能为空。
       密码长度不能少于 6位。       
       手机号码必须符合格式。
       */

    //最常见方式
    /*
    var registerForm = document.getElementById( 'registerForm' );
    registerForm.onsubmit = function(){
        if ( registerForm.userName.value === '' ){
            alert ( '用户名不能为空' );
            return false;
        }
        if ( registerForm.password.value.length < 6 ){
            alert ( '密码长度不能少于 6 位' );
            return false;
        }
        if ( !/(^1[3|5|8][0-9]{9}$)/.test( registerForm.phoneNumber.value ) ){
            alert ( '手机号码格式不正确' );
            return false;
        }
    }
    */
    //=====策略模式=====
    //将验证逻辑封装为策略对象
    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 validataFunc = function () {
        var validator = new Validator();//创建一个validator对象
        /**********添加一些校验规则***********/
        validator.add( registerForm.userName, 'isNonEmpty', '用户名不能为空' );
        validator.add( registerForm.password, 'minLength:6', '密码长度不能少于 6 位' );
        validator.add( registerForm.phoneNumber, 'isMobile', '手机号码格式不正确' );
        var errorMsg = validator.start(); // 获得校验结果
        return errorMsg; // 返回校验结果
    }

    var registerForm = document.getElementById('registerForm');
    registerForm.onsubmit = function () {
        var errorMsg = validataFunc(); // 如果 errorMsg 有确切的返回值，说明未通过校验
        if ( errorMsg ){
            alert ( errorMsg );
            return false; // 阻止表单提交
        }
    }

    var Validator = function () {
        this.cache = [];//保存验证规则
    }
    Validator.prototype.add = function (dom, rule, errorMsg) {
        var ary = rule.split( ':' ); // 把 strategy 和参数分开
        this.cache.push(function () {//把校验的步骤用空函数包装起来，并且放入 cache
            var strategy = ary.shift();// 用户挑选的 strategy
            ary.unshift( dom.value ); // 把 input 的 value 添加进参数列表
            ary.push( errorMsg ); // 把 errorMsg 添加进参数列表
            return strategies[ strategy ].apply( dom, ary );
        })
    }
    Validator.prototype.start = function () {
        for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){
            var msg = validatorFunc(); // 开始校验，并取得校验后的返回信息
            if ( msg ){ // 如果有确切的返回值，说明校验没有通过
                return msg;
            }
        }
    }
</script>
</html>

 

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