javascript设计模式实践之策略模式--输入验证

策略模式中的策略就是一种算法或者业务规则，将这些策略作为函数进行封装，并向外提供统一的调用执行。

先定义一个简单的输入表单：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style>

            .form{

                width: 400px;

                height: 200px;

                #margin: 0px auto;

            }

            .form-item-label{

                width:100px;

                text-align: right;

                float: left;

            }

            .form-item-input{

                float: left;

            }

            .form-item{

                width: 100% ;

                height: 50px;

                line-height: 50px;

            }

        </style>

    </head>

    <body>

        <div class='form'>

            <div class="form-item">

                <div class='form-item-label'><span>用户名：</span></div>

                <div class='form-item-input'><input id='userName' name='用户名' type="text"></div>

            </div>

            <div class="form-item" >

                <div class='form-item-label'><span>密码：</span></div>

                <div class='form-item-input'><input id='password' name='密码' type="text"></div>

            </div>

            <div class="form-item" >

                <div class='form-item-label'><span>确认密码：</span></div>

                <div class='form-item-input'><input id='repassword' name='密码确认' type="text"></div>

            </div>

            <div class="form-item" >

                <div class='form-item-label'><span>邮箱：</span></div>

                <div class='form-item-input'><input id='mail' name='邮箱' type="text" ></div>

            </div>

        </div>

        <br>

        <button id='submit' >提交</button>

        <script type='text/javascript' src="../reference/jquery-1.11.3.min.js"></script>

    </body>

</html>

一般在页面上编辑信息后的提交动作中，都需要对输入的信息进行验证，会看到把很多负责check的代码写在提交函数中或者写在一个独立的check函数中。

比如像下面这样。

            $(document).ready(function(){

                $('#submit').bind('click', doSubmit);

            });

            function doSubmit(){

                var eleUserName = document.getElementById('userName');

                if(eleUserName.value === '') {

                    alert('用户名不能为空');

                    return;

                }

                if(eleUserName.length < 6) {

                    alert('用户名长度不能少于6个字符');

                    return;

                }

                if(eleUserName.length > 6) {

                    alert('用户名长度不能多于20个字符');

                    return;

                }

            }

这样的写法功能上肯定能满足要求，但是，会存在几个问题：

1.如果我要在其他页面上使用，那就要将代码进行复制，所谓的复用就变成了复制，代码会存在大量重复。好一点的会把check代码分类整理封装，单还会存在较多的重复复制。

2.如果我要增加一个输入验证，那么就要直接修改提交函数，该函数会显的臃肿，并且是破坏“开闭”原则的。

3.如果修改了提交函数，就要将函数设计的测试全都覆盖一遍，因为，不知道何时就会发生误改或者未知的情况。

改造步骤：

1.将每个验证逻辑看成是一个验证策略并封装成每个验证策略函数，函数参数保持一致，可以接受dom元素，被验证的值，错误消息，定制参数。

2.定义验证器，可将验证策略函数导入，也可以添加。

3.验证器提供验证方法，用于验证时的调用，其内部调用具体的验证策略函数。

4.验证调用。

步骤1.

把每一个if都看成一种校验的业务规则，把每种业务规则作为一个单独的策略函数，将所有的策略函数封装成一个策略对象。

            var validationStrategies = {

                isNoEmpty: function(element, errMsg, value) {

                    if(value === '') {

                        return this.buildInvalidObj(element, errMsg, value );

                    }

                },

                minLength: function(element, errMsg, value, length) {

                    if(value.length < length){

                        return this.buildInvalidObj(element, errMsg, value);

                    }

                },

                maxLength: function(element, errMsg, value, length) {

                    if(value.length > length){

                        return this.buildInvalidObj(element, errMsg, value);

                    }

                },

                isMail: function(element, errMsg, value, length) {

                    var reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;

                    if(!reg.test(value)){

                        return this.buildInvalidObj(element, errMsg, value);

                    }

                }

            };

所有函数的参数的前3个都保持一致，而且是必须的，表示被验证的DOM元素，错误消息，被验证的值，第4个开始由函数自身的验证规则决定定制的参数，可有多个参数。

“buildInvalidObj”方法只是把前3个参数打成一个错误对象进行返回，只要验证不通过就会返回这个错误对象。

根据依赖倒置原则，高层次的模块不应该依赖于低层次的模块，因此不能让验证的调用方直接使用。

通过验证器的方式进行封装和抽象。

步骤2：

定义验证器，可以将所有验证策略导入其内，也可以单独添加验证策略函数。

            //输入验证器

            function InputValidators(){

                this.validators = [];

                this.strategies = {};

            }

            //从策略对象导入验证策略函数

            //参数:

            //  strategies: 包含各种策略函数的对象

            InputValidators.prototype.importStrategies = function(strategies) {

                for(var strategyName in strategies) {

                    this.addValidationStrategy(strategyName, strategies[strategyName]);

                }

            };

            //添加验证策略函数

            //参数:

            //  name: 策略名称

            //  strategy: 策略函数

            InputValidators.prototype.addValidationStrategy = function(name, strategy){

                this.strategies[name] = strategy;

            };

步骤3：

添加验证方法，接受外部调用。

第一个参数rule，设置成验证规则，比如 "minLength:6"，通过下面的代码会生成对具体策略函数的调用，调用会压到缓存中，等待一起调用。

":6"表示策略函数根据自身规则所定制的参数。

            //添加验证方法

            //参数:

            //  rule: 验证策略字符串

            //  element: 被验证的dom元素

            //  errMsg: 验证失败时显示的提示信息

            //  value: 被验证的值

            InputValidators.prototype.addValidator = function(rule, element, errMsg, value) {

                var that = this;

                var ruleElements = rule.split(":");

                this.validators.push(function() {

                    var strategy = ruleElements.shift();

                    var params = ruleElements;

                    params.unshift(value);

                    params.unshift(errMsg);

                    params.unshift(element);

                    return that.strategies[strategy].apply(that, params);

                });

            };

通过一个check函数来调用所有的验证。并将错误的结果进行返回。

            //开始验证

            InputValidators.prototype.check = function() {

                for(var i = 0, validator; validator = this.validators[i++];){

                    var result = validator();

                    if(result) {

                        return result;

                    }

                }

            };

步骤4：

在需要验证的地方，先new一个验证器对象。

                var validators = new  InputValidators();

将包含验证策略函数的对象导入，或者单独添加验证策略函数。

                validators.importStrategies(validationStrategies);

                validators.addValidationStrategy('isEqual',  function(element, errMsg, value1, value2) {

                    if(value1 !== value2) {

                        return this.buildInvalidObj(element, errMsg, value1 );

                    }

                });

可以看出，不同的验证策略我们可以预先封装进策略对象中，也可以根据实际情况即时添加。

然后通过添加验证方法将需要验证的策略，被验证的dom元素，错误消息，被验证的值添加进验证器中，这样避免了直接调用策略对象，降低了耦合性。

var eleUserName = document.getElementById('userName');

validators.addValidator('isNoEmpty', eleUserName, '用户名不能为空', eleUserName.value);

validators.addValidator('minLength:6', eleUserName, '用户名的字符个数必须是6到20个', eleUserName.value);

validators.addValidator('maxLength:20', eleUserName, '用户名的字符个数必须是6到20个', eleUserName.value);

var elePassword = document.getElementById('password');

validators.addValidator('isNoEmpty', elePassword, '密码不能为空', elePassword.value);

validators.addValidator('minLength:6', elePassword, '密码的字符个数必须是6到20个', elePassword.value);

validators.addValidator('maxLength:20', elePassword, '密码的字符个数必须是6到20个', elePassword.value);

var eleRepassword = document.getElementById('repassword');

validators.addValidator('isNoEmpty', eleRepassword, '确认密码不能为空', eleRepassword.value);

validators.addValidator('minLength:6', eleRepassword, '确认密码的字符个数必须是6到20个', eleRepassword.value);

validators.addValidator('maxLength:20', eleRepassword, '确认密码的字符个数必须是6到20个', eleRepassword.value);

validators.addValidator('isEqual:' + elePassword.value, eleRepassword, '两次密码不一致', eleRepassword.value);

var eleMail = document.getElementById('mail');

validators.addValidator('isNoEmpty', eleMail, '邮箱不能为空', eleMail.value);

validators.addValidator('isMail', eleMail, '邮箱不是一个有效的格式', eleMail.value);

调用验证器的check执行所有的验证。

                var result = validators.check();

                if(result){

                    alert(result.errMsg);

                    result.element.focus();

                    result.element.select();

                    return false;

                }

check返回的是错误对象，我们可以在check后通过该对象统一地对DOM元素进行提示性操作，比如设置焦点，选中内容，或者为输入框外部包上一层红色的样式。

至此，可以看出通过策略模式的改造，输入验证时，我们只需要关心用哪个验证规则，采用什么样的提示性信息即可，不再暴露实现细节，方便调用，方便后续的扩展和组件化。

全部代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style>

            .form{

                width: 400px;

                height: 200px;

                #margin: 0px auto;

            }

            .form-item-label{

                width:100px;

                text-align: right;

                float: left;

            }

            .form-item-input{

                float: left;

            }

            .form-item{

                width: 100% ;

                height: 50px;

                line-height: 50px;

            }

        </style>

    </head>

    <body>

        <div class='form'>

            <div class="form-item">

                <div class='form-item-label'><span>用户名：</span></div>

                <div class='form-item-input'><input id='userName' name='用户名' type="text"></div>

            </div>

            <div class="form-item" >

                <div class='form-item-label'><span>密码：</span></div>

                <div class='form-item-input'><input id='password' name='密码' type="text"></div>

            </div>

            <div class="form-item" >

                <div class='form-item-label'><span>确认密码：</span></div>

                <div class='form-item-input'><input id='repassword' name='密码确认' type="text"></div>

            </div>

            <div class="form-item" >

                <div class='form-item-label'><span>邮箱：</span></div>

                <div class='form-item-input'><input id='mail' name='邮箱' type="text" ></div>

            </div>

        </div>

        <br>

        <button id='submit' >提交</button>

        <script type='text/javascript' src="../reference/jquery-1.11.3.min.js"></script>

        <script type='text/javascript'>

            $(document).ready(function(){

                $('#submit').bind('click', doSubmit);

            });

function doSubmit(){

                var validators = new  InputValidators();

                validators.importStrategies(validationStrategies);

                validators.addValidationStrategy('isEqual',  function(element, errMsg, value1, value2) {

                    if(value1 !== value2) {

                        return this.buildInvalidObj(element, errMsg, value1 );

                    }

                });

                var eleUserName = document.getElementById('userName');

                validators.addValidator('isNoEmpty', eleUserName, '用户名不能为空', eleUserName.value);

                validators.addValidator('minLength:6', eleUserName, '用户名的字符个数必须是6到20个', eleUserName.value);

                validators.addValidator('maxLength:20', eleUserName, '用户名的字符个数必须是6到20个', eleUserName.value);

                var elePassword = document.getElementById('password');

                validators.addValidator('isNoEmpty', elePassword, '密码不能为空', elePassword.value);

                validators.addValidator('minLength:6', elePassword, '密码的字符个数必须是6到20个', elePassword.value);

                validators.addValidator('maxLength:20', elePassword, '密码的字符个数必须是6到20个', elePassword.value);

                var eleRepassword = document.getElementById('repassword');

                validators.addValidator('isNoEmpty', eleRepassword, '确认密码不能为空', eleRepassword.value);

                validators.addValidator('minLength:6', eleRepassword, '确认密码的字符个数必须是6到20个', eleRepassword.value);

                validators.addValidator('maxLength:20', eleRepassword, '确认密码的字符个数必须是6到20个', eleRepassword.value);

                validators.addValidator('isEqual:' + elePassword.value, eleRepassword, '两次密码不一致', eleRepassword.value);

                var eleMail = document.getElementById('mail');

                validators.addValidator('isNoEmpty', eleMail, '邮箱不能为空', eleMail.value);

                validators.addValidator('isMail', eleMail, '邮箱不是一个有效的格式', eleMail.value);

                var result = validators.check();

                if(result){

                    alert(result.errMsg);

                    result.element.focus();

                    result.element.select();

                    return false;

                }

                alert('验证通过');

            }

            //输入验证器

            function InputValidators(){

                this.validators = [];

                this.strategies = {};

                //this.from(validationStrategies);

            }

            //添加验证方法

            //参数:

            //  rule: 验证策略字符串

            //  element: 被验证的dom元素

            //  errMsg: 验证失败时显示的提示信息

            //  value: 被验证的值

            InputValidators.prototype.addValidator = function(rule, element, errMsg, value) {

                var that = this;

                var ruleElements = rule.split(":");

                this.validators.push(function() {

                    var strategy = ruleElements.shift();

                    var params = ruleElements;

                    params.unshift(value);

                    params.unshift(errMsg);

                    params.unshift(element);

                    return that.strategies[strategy].apply(that, params);

                });

            };

            //添加验证策略函数

            //参数:

            //  name: 策略名称

            //  strategy: 策略函数

            InputValidators.prototype.addValidationStrategy = function(name, strategy){

                this.strategies[name] = strategy;

            };

            //从策略对象导入验证策略函数

            //参数:

            //  strategies: 包含各种策略函数的对象

            InputValidators.prototype.importStrategies = function(strategies) {

                for(var strategyName in strategies) {

                    this.addValidationStrategy(strategyName, strategies[strategyName]);

                }

            };

            //验证失败时，将相关的错误信息打包返回

            //参数:

            //  element: dom元素

            //   errMsg: 验证失败时的提示消息

            //    value: 被验证的值

            InputValidators.prototype.buildInvalidObj = function(element, errMsg, value){

                return {

                    'value': value,

                    'element': element,

                    'errMsg': errMsg

                };

            };

            //开始验证

            InputValidators.prototype.check = function() {

                for(var i = 0, validator; validator = this.validators[i++];){

                    var result = validator();

                    if(result) {

                        return result;

                    }

                }

            };

            //验证策略对象，包含默认的验证策略函数

            var validationStrategies = {

                isNoEmpty: function(element, errMsg, value) {

                    if(value === '') {

                        return this.buildInvalidObj(element, errMsg, value );

                    }

                },

                minLength: function(element, errMsg, value, length) {

                    if(value.length < length){

                        return this.buildInvalidObj(element, errMsg, value);

                    }

                },

                maxLength: function(element, errMsg, value, length) {

                    if(value.length > length){

                        return this.buildInvalidObj(element, errMsg, value);

                    }

                },

                isMail: function(element, errMsg, value, length) {

                    var reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;

                    if(!reg.test(value)){

                        return this.buildInvalidObj(element, errMsg, value);

                    }

                }

            };

        </script>

    </body>

</html>

javascript设计模式实践之策略模式--输入验证的更多相关文章

javascript 设计模式实践之策略模式--输入验证
博客地址:http://www.cnblogs.com/kongxianghai/p/4985122.html,写的挺好的推荐下!
javascript设计模式－－策略模式
javascript策略模式总结 1.什么是策略模式? 策略模式的定义是:定义一系列的算法,把他们独立封装起来,并且可以相互替换. 例如我们需要写一段代码来计算员工的奖金.当绩效为a时,奖金为工资的5 ...
JavaScript设计模式 Item 7 --策略模式Strategy
1.策略模式的定义何为策略?比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 如果没有时间但是不在乎钱,可以选择坐飞机. 如果没有钱,可以选择坐大巴或者火车. 如果再穷一点,可以选 ...
javascript设计模式学习之五——策略模式
一.策略模式定义: 定义一些列的算法/规则,将它们封装起来,使得它们可以互相替换/组合使用.其目的在于将算法/规则封装起来,将算法/规则的使用与实现分离出来. 通过策略模式,可以减少算法计算过程中大量 ...
javascript设计模式实践之代理模式--图片预加载
图片的预加载就是在加载大图片前,先显示一个loading.gif,就算在网络比较慢的时候也能让人知道正在加载,总比啥反应都没有强. 下面这段代码就是预加载的一个简单的实现,假设先不处理加载图片时的on ...
Python设计模式: 最佳的"策略"模式实践代码
Python设计模式: 最佳的"策略"模式实践代码今天抽空看了下流畅的python,发现里面介绍了不少python自带的库的使用实例,用起来非常的优雅. 平时用Python来写爬 ...
javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）
类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...
[转] JavaScript设计模式之发布-订阅模式（观察者模式）-Part1
<JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...
javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件（三）
在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...

随机推荐

人人都是 DBA（VI）SQL Server 事务日志
SQL Server 的数据库引擎通过事务服务(Transaction Services)提供事务的 ACID 属性支持.ACID 属性包括: 原子性(Atomicity) 一致性(Consisten ...
使用MYSQL命令直接导入导出SQL文件
很多时候,我们的数据开发都会用到很多开发利器,比如powerdesigner, navicat等这些软件,虽然好用,但是要收费,在公司里面是禁止使用盗版软件的,怕罚款各方面的,所以我们也不敢直接在公司 ...
【IOS】Target membership
Target membership是指XCode中,一个文件属于哪一个工程,在XCode左侧的工程面板中选中一个文件,在XCode右侧的属性面板中会显示其Target Membership,如下图. ...
可拖动的DIV续
之前写过一篇可拖动的DIV讲如何实现可拖动的元素,最后提出了几点不足,这篇文章主要就是回答着三个问题 1. 浏览器兼容性 2. 边界检查 3. 拖动卡顿.失灵先附上上次代码 <!DOCTYPE ...
使用aggregate在MongoDB中查找重复的数据记录
我们知道,MongoDB属于文档型数据库,其存储的文档类型都是JSON对象.正是由于这一特性,我们在Node.js中会经常使用MongoDB进行数据的存取.但由于Node.js是异步执行的,这就导致我 ...
AngularJS快速入门指南15：API
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
javaweb学习总结—Apache的DBUtils框架学习
注明: 本文转载自http://www.cnblogs.com/xdp-gacl/p/4007225.html 一.commons-dbutils简介 commons-dbutils 是 Apache ...
Liferay7 BPM门户开发之40: Form表单的Action到Render的数据传递
在Form提交后的变量,很多情况是要展现在jsp页面中,这时Action到Render的变量传递就非常有用. 例如,您在数据库中添加了学生的详细信息. 为了实现这一需求,先创建Form表单(学生的细节 ...
Apache Tomcat
官网:http://tomcat.apache.org/ Documentation:http://tomcat.apache.org/tomcat-8.0-doc/index.html
CSS3新技能学习笔记
说来惭愧自认为对css了解,但在项目中却很少有正确的使用css,如果面向对象的css吧,其实也不是不想用而是css天生就是面向对象的,高度可重用,但是如果把每个都单独提取,难免会有过多的class以及 ...

javascript设计模式实践之策略模式--输入验证

javascript设计模式实践之策略模式--输入验证的更多相关文章

随机推荐

热门专题