//添加验证方法 //参数: // 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> <div> <div><span>用户名：</span></div> <div><input type="text"></div> </div> <div > <div><span>密码：</span></div> <div><input type="text"></div> </div> <div > <div><span>确认密码：</span></div> <div><input type="text"></div> </div> <div > <div><span>邮箱：</span></div> <div><input type="text" ></div> </div> </div> <br> <button >提交</button> <script type='text/javascript' src="https://www.jb51.net/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设计模式--策略模式之输入验证的全部内容，希望大家喜欢。
您可能感兴趣的文章: