国人编写的、超牛的、基于jQuery插件式、监听模式(无侵入)的html页面form表单通用验证框架

 

推荐一个国人编写的、超牛的、基于jQuery插件式、监听模式(无侵入)的html页面form表单通用验证框架：

[b]formValidator[/b]

它能监听到所有控件类型、所有数据格式，还有ajax异步验证功能(例如用户注册时去数据库查询以检查有没有重复)。消息提示有多种模式，例如在控件旁边显示消息、弹出式消息。下面提供一样注册页面验证示例：

Html的form表单：

[code=HTML] <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>[/code]

上面每控件后面都一个<div>标签是用来显示消息的。

Html的JavaScript:

[code=HTML]

<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: "请输入验证码!"});

});

[/code]

这是一个典型的注册表单，form中没有侵入作何元素。而formValidator则通过jQuery的监听模式实现对form表单的验证。并对username、email字段实现无刷新服务器验证。

压缩包中含有demo，demo就是文档，很容易使用