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