国人编写的、超牛的、基于jQuery插件式、监听模式(无侵入)的html页面form表单通用验证框架
2011-11-14 09:04
921 查看
推荐一个国人编写的、超牛的、基于jQuery插件式、监听模式(无侵入)的html页面form表单通用验证框架:
formValidator
它能监听到所有控件类型、所有数据格式,还有ajax异步验证功能(例如用户注册时去数据库查询以检查有没有重复)。消息提示有多种模式,例如在控件旁边显示消息、弹出式消息。下面提供一样注册页面验证示例:
Html的form表单:
上面每控件后面都一个<div>标签是用来显示消息的。
Html的JavaScript:
这是一个典型的注册表单,form中没有侵入作何元素。而formValidator则通过jQuery的监听模式实现对form表单的验证。并对username、email字段实现无刷新服务器验证。
压缩包中含有demo,demo就是文档,很容易使用
formValidator
它能监听到所有控件类型、所有数据格式,还有ajax异步验证功能(例如用户注册时去数据库查询以检查有没有重复)。消息提示有多种模式,例如在控件旁边显示消息、弹出式消息。下面提供一样注册页面验证示例:
Html的form表单:
<form id="userReg" name="userReg" method="post" action="userReg.do"> * 用 户 名:<input id="username" title="请输入您的用户名" size="22" name="username"/></td><div id="usernameTip"><br/> * 密 码:<input id="password" type="password" size="22" name="password"/><div id="passwordTip"> </div><br/> * 确认密码:<input id="repassword" type="password" size="22" name="repassword"/><div id="repasswordTip"> </div><br/> * 电子邮件:<input id="email" size="22" name="email"/><div id="emailTip"> </div><br/> * 验 证 码:<input id="valicode" title="请输入验证码" size="8" name="valicode"/><img src="/validateCode.jsp?随机数" alt="" /><div id="valicodeTip"> </div> <input type="submit" name="button" id="button" value="注册" /> </form>
上面每控件后面都一个<div>标签是用来显示消息的。
Html的JavaScript:
<script language="JavaScript" type="text/javascript"> $(document).ready(function(){ //告诉formValidator框架要验证userReg这个表单,如果提交时还有错误,则弹出对话框通知 $.formValidator.initConfig({formid:"userReg",onerror:function(msg){alert(msg)}}); //验证用户名这个字段,同时还要求到服务器验证是否有重复值 $("#username").formValidator({onshow:" ",onfocus:"用户名至少4个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputValidator({min:4,max:48,onerror:"你输入的用户名非法,请确认"}).regexValidator({regexp:"username",datatype:"enum",onerror:"用户名格式不正确"}).ajaxValidator({ type : "get", url : "/userValidator.do", success : function(data){if( data == "1" ){return true;}else{return false;}}, buttons: $("#button"), error: function(){alert("服务器没有返回数据,可能服务器忙,请重试");}, onerror : "该用户名不可用,请更换用户名", onwait : "正在检查此用户名是否被人注册,请稍候..." }); //验证密码 $("#password").formValidator({onshow:" ",onfocus:"密码不能为空",oncorrect:"密码合法"}).inputValidator({min:1,empty:{leftempty:false,rightempty:false,emptyerror:"密码两边不能有空符号"},onerror:"密码不能为空,请确认"}); //验证确认密码,同时要求与第一交密码一致 $("#repassword").formValidator({onshow:" ",onfocus:"两次密码必须一致哦",oncorrect:"密码一致"}).inputValidator({min:1,empty:{leftempty:false,rightempty:false,emptyerror:"重复密码两边不能有空符号"},onerror:"重复密码不能为空,请确认"}).compareValidator({desid:"passWord",operateor:"=",onerror:"2次密码不一致,请确认"}); //验证电子邮件,同时要求数据库中必须唯一 $("#email").formValidator({onshow:" ",onfocus:"邮箱6-100个字符,输入正确了才能离开焦点",oncorrect:"该电子信箱可以注册"}).inputValidator({min:6,onerror:"你输入的电子邮箱不合格,请确认"}).regexValidator({regexp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onerror:"你输入的邮箱格式不正确"}).ajaxValidator({ type : "get", url : "/emailValidator.do", success : function(data){ if( data == "1" ){return true;}else{return false;}}, buttons: $("#button"), error: function(){alert("服务器没有返回数据,可能服务器忙,请重试");}, onerror : "该电子信箱已被注册,请更换一个", onwait : "正在对电子信箱唯一性进行合校验,请稍候..." }); //对验证码是否输入进行验证 $("#valicode").formValidator({onshow:" ",onfocus:"输入旁边图片上的数字"}).inputValidator({min:3,onerror: "请输入验证码!"}); });
这是一个典型的注册表单,form中没有侵入作何元素。而formValidator则通过jQuery的监听模式实现对form表单的验证。并对username、email字段实现无刷新服务器验证。
压缩包中含有demo,demo就是文档,很容易使用
相关文章推荐
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)
- 基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
- jQuery html5Validate基于HTML5表单验证插件
- (转载)jQuery html5Validate基于HTML5表单验证插件
- HTML表单javascript验证通用模式
- 基于 猫冬的 jQuery formValidator表单验证 的asp.net 控件
- 基于jquery的提交、编辑页面js编写框架
- 基于Jquery的表单验证框架
- jQuery html5Validate基于HTML5表单验证插件
- Html表单javascript 验证通用模式(收藏)
- 基于Jquery的FormValidator表单验证插件
- YII2框架表单-model(验证)-HTML_help部件 URL_help部件 以注册页面为实例
- YII2框架表单-model(验证)-HTML_help部件 URL_help部件 以注册页面为实例
- 基于jquery的form表单验证
- HTML表单javascript验证通用模式
- 基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
- WEB开发中HTML页面表单(FORM)域输入合法性的客户端验证
- Html页面窗口框架与表单
- 基于BootstrapValidator的Form表单验证(24)
- jQuery.validate验证时用的是Form输入表单的name属性