策略模式

<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>

 //算法单独出来

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;
　　　　}
　　}
};

　　

 

　摘自JavaScript设计模式与开发实践