使用策略模式进行简单的form验证
2017-01-15 20:52
363 查看
<h1>使用策略模式进行简单的form验证</h1> <form action="" method="post" id="registForm" novalidate> 请输入用户名:<input type="text" name="userName" /> <br /> 请输入密码:<input type="text" name="password" /> <br /> 请输入手机号:<input type="text" name="phoneNumber" /> <br /> <input type="submit" value="提交" /> </form> <script> var stategies = { required: function( value, errorMsg ){ if( value == "" ){ return errorMsg; } }, minLength: function( value, length, errorMsg ){ if( value.length < length ){ return errorMsg; } }, isMobile: function( value, errorMsg ){ if( !( /^1[34578]\d{9}$/.test(value) ) ){ return errorMsg; } } }; var Validator = function(){ this.cache = []; }; Validator.prototype = { add: function( dom, rules ){ var self = this; for( var i= 0, rule; rule = rules[ i++ ]; ){ ( function( rule ){ var strategyAry = rule.strategy.split( ":" ); var errorMsg = rule.errorMsg; self.cache.push( function(){ var strategy = strategyAry.shift(); strategyAry.unshift( dom.value ); strategyAry.push( errorMsg ); return stategies[ strategy ].apply( dom, strategyAry ); } ) }( rule ) ) } }, start: function(){ for( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){ var errorMsg = validatorFunc(); if( errorMsg ){ return errorMsg; } } } }; var registForm = document.getElementById( "registForm" ); var validateFunc = function(){ var validator = new Validator(); validator.add( registForm.userName, [{ strategy: "required", errorMsg: "用户名不能为空" },{ strategy: "minLength:3", errorMsg: "用户名长度不能小于3位" }]); validator.add( registForm.password, [{ strategy: "minLength:6", errorMsg: "密码长度不能小于6位" }]); validator.add( registForm.phoneNumber, [{ strategy: "isMobile", errorMsg: "手机号码格式不正确" }]); var errorMsg = validator.start(); return errorMsg; }; var errorMsg = validateFunc(); registForm.onsubmit = function(){ var errorMsg = validateFunc(); if( errorMsg ){ console.log(errorMsg); return false; } } </script>
相关文章推荐
- 使用jquery的验证框架,对表单进行验证(简单、基础)
- 在C#中使用访问者(Visitor)模式对组合(Composite)对象进行验证
- spring mvc 通过bean获取form的参数和并且进行服务器验证 ,而且支持多个文件上传的用法。html使用form_data
- Struts2 官方教程:使用XML进行表单验证(Form Validation Using XML)
- magento中如何使用Prototype对form进行验证
- 使用Django的ModelForm对表单进行自动验证(可自定义验证规则)
- Laravel中使用FormRequest进行表单验证及对验证异常进行自定义处理
- 策略模式在java中的简单使用的代码
- JavaMail:用Authenticator的子类进行身份验证及策略模式(Strategy)
- JavaMail:用Authenticator的子类进行身份验证及策略模式(Strategy)
- pyton简单网络爬虫,aspx网站中form使用到了__VIEWSTATE、__EVENTVALIDATION、cookie来验证的提交
- WPF中使用MVVM模式进行简单的数据绑定
- 【3】.net MVC 使用IPrincipal进行Form登录即权限验证
- 在C#中使用访问者(Visitor)模式对组合(Composite)对象进行验证
- WebService 之CXF拦截器,使用 CXF 拦截器进行简单的 head 信息验证,适合入门选手
- jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).
- 策略模式的简单使用
- 使用正则表达式进行简单的邮箱验证操作
- JavaMail:用Authenticator的子类进行身份验证及策略模式
- Laravel中使用FormRequest进行表单验证方法及问题汇总