1. //加载jQuery类库 
2. <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
3. //加载插件 
4. <script type="text/javascript" src="formValidator-4.1.1.min.js"></script> 
5. //加载扩展库(如果想用里面的函数、正则表达式，必须加载该文件) 
6. <script type="text/javascript" src="formValidatorRegex.js"></script> 

1. inputValiator       //针对input、textarea、select控件的字符长度值范围、选择个数的控制 
2. compareValidator    //提供2个对象的比较，目前可以比较字符串和数值型 
3. regexValidator      //利用正则表达式验证 
4. functionValidator   //利用外部函数来做校验 
5. passwordValidator   //对密码强度进行校验 
6. ajaxValidator       //通过ajax到服务器上做数据校验 
7. formValidator       //对单个控件进行配置 
8. defaultPassed       //默认校验通过，显示onCorrect状态 
9. unFormValidator     //接触控件的验证功能 
10. $.formValidator.initConfig      //对整个校验组进行全局配置 
11. $.formValidator.pageIsValid     //对整个校验组进行校验，用来处理一个页面多个提交按钮的情况 
12. $.formValidator.getLength       //返回控件的长度/选择个数/索引号 
13. $.formValidator.reloadAutoTip   //重新定位提示层的位置 
14. $.formValidator.retSetTipState  //来把该组的提示内容恢复到内容刚打开的状态 
15. $.formValidator.serialize       //把指定的内容序列化，中文不会乱码 

1. <script type="text/javascript"> 
2. $.formValidator.initConfig({ 
3.     validatorGroup:"1", //校验组组号，默认"1"。formvalidator函数里的validatorGroup值如果和这里的值一样，就认为是同一组的控件. 
4.     formId:"myform", //表单FORM的ID，插件自动在表单的submit事件里注册函数pageIsValid 
5.     mode:"FixTip", //显示模式。固定提示层(FixTip)|自动构建提示层(AutoTip)|单个提示层跟随(SingleTip)|弹出提示内容(AlertTip) 
6.     errorFocus:true, //整个校验组校验失败时，第一个出错的控件是否获得焦点,默认true 
7.     forceValid:true, //强制验证，同组的控件都采用：直到输入正确为止才允许离开焦点,默认true 
8.     wideWord:true, //宽字节，默认true。是否把一个全角字符当做2个长度 
9.     onSuccess:function(){}, //该校验组通过后的回调函数，返回false，组织表单的提交 
10.     ajaxForm:Json, //把整个表单的数据通过ajax提交给服务器。 
11.     submitOnce:false, //校验通过后，是否灰掉所有的提交按钮,默认false 
12.     AjaxPrompt:String, //提交之前，如果存在ajax校验，且有未返回的，则在触发整组校验的时候会弹出此提示内容。默认值：“当前有数据正在进行服务器端校验，请稍候”，如果为空则不提示 
13.     onError:function(msg,obj,errorlist){}, //该组校验失败后的回调函数 有三个参数 参数1： 一个校验没有通过的错误信息,参数2： 一个校验没有通过的元素对象,参数3： 所有的错误信息数组，你可以通过$.map来遍历 
14.     debug:false //调试模式，如果你设为调试模式，在校验成功后会有一个提示窗口：现在正处于调试模式(debug:true)，不能提交， 默认false 
15. }); 
16. </script> 

1. <script type="text/javascript"> 
2. $("#username").formValidator({ 
3.     validatorGroup:String, //校验组 
4.     empty:false, //控件是否可以为空，默认false。如果是input-text控件，表示内容是否可以为空，如果是checkbox、radio、select控件表示是否可以不选择项 
5.     onShowText:String, //显示在输入框里的提示，默认:""。 
6.     onShowTextColor:Json, //输入框里提示的颜色,默认： {mouseOnColor:"#999999",mouseOutColor:"#000000"}。 
7.     autoModify:Boolean, //自动修复错误,默认true。离开焦点，校验不通过，是否自动修复错误 
8.     onEmpty:String, //空时候的提示，默认："输入内容为空"。当内容为空的时候提示，为空则不显示提示内容。 
9.     onShow:String, //显示的时候提示，默认："请输入内容"。页面刚打开时候的提示消息，为空则不显示。 
10.     onFocus:String, //获取焦点的提示，默认："请输入内容"。控件获取焦点时候的提示，为空则不显示。 
11.     onCorrect:String, //正确后的提示，默认："输入正确"。当焦点离开控件的时候，如果输入正确将出现该提示，为空不显示。 
12.     tipID:String, //提示层ID。默认用表单ID+"Tip",也可以显式的指明ID值。 
13.     tipCss:Json, //自动构建的提示层样式，主要用于定位自动构建的提示层。有特定要求，详细看文档 
14.     relativeID:String, //相对控件的ID，默认：当前校验控件的ID，采用自动构建提示层的时候，提示层相对的目标控件ID，tipCss属性就是相对于这个参数而言的 
15.     pwdTipId:String, //默认：控件ID+Tip。用于显示密码强度校验提示的容器ID，默认跟tipID参数默认值相同，即显示在同个DIV里 
16.     fixTipID:String, //默认：null。表示固定提示消息要放置的容器ID值。 
17.     forceValid:Boolean, //是否强制输入,默认：true。是否一致到到输入正确为止才允许离开焦点 
18.     ajax:Boolean, //提交服务器，默认true。某个控件有ajaxValidator函数校验的时候，该参数决定哪些控件的值一起提交给服务器。 
19.     defaultValue:Object|String, //为input、select、textarea控件设置默认值 
20.     triggerEvent:String, //触发校验的事件，默认blur。当前支持blur和change两种。 
21.     leftTrim:Boolean, //去掉左边空格，默认false。是否先去掉左边空格再校验. 
22.     rightTrim:Boolean, //去掉右边空格，默认false。是否先去掉右边空格再校验.   
23. }); 
24. </script> 

1. <script type="text/javascript"> 
2. $("#xx").formValidator({}).inputValidator({ 
3.     type:Object, //比较类型，默认size。有以下几个类型：size:表示字符长度选择的个数；number:数值型比较；string：字符型比较；date：短日期比较；datetime：长日期比较 
4.     min:Object, //最小长度/值。对checkbox/radio而言表示选中控件的个数，对text、password、textarea而言表示输入字符的长度或值得大小 
5.     max:Object, //最大长度/值. 
6.     onError:String, //发生错误时显示，默认：输入错误。为空则不显示 
7.     onErrorMin:String, //比min属性小的提示。 
8.     onErrorMax:String, //比max属性大的提示。 
9.     empty:Json, //是否允许两边为空，默认允许。默认值：{leftEmpty:true,rightEmpty:true,emptyError:null} 
10. }); 
11. $("#xx").formValidator({}).compareValidator({ 
12.     desID:String, //要比较控件的ID。要跟源目标进行比较的目标ID 
13.     operateor:String, //比较符号，一共有如下几种：=、!=、>、>=、<、<= 
14.     dataType:String, //数据类型。目前只支持4种："string","number","datetime","date" 
15.     onError:String, //发生错误的提示。 
16. }); 
17. $("#xx").formValidator({}).regexValidator({ 
18.     regExp:Object, //正则表达式或表达式数组。参数类型分为两类：1.字符型。2.字符数组型。都用来表示正则表达式或枚举类型。 
19.     //采用的是显式构造函数new RegExp("pattern"[,"flags"]); 由于Javascript 中'\' 被用作转义字符，所以在使用显示构造函数构造实例对象的时候，需要使用'\' 代替'\' 
20.     param:String, //附加参数，默认:"i"。值有几下几种类型：g、i、m g：代表可以进行全局匹配。i：代表不区分大小写匹配。m：代表可以进行多行匹配。 
21.     compareType:String, //比较类型,默认："||"。值有以下几种：||：或的关系;&&：并列的关系; 当regExp为数组的时候，当前这个参数就表示，数组里的正则表达式的相互关系。 
22.     dataType:String, //默认:"string",数据类型.值有以下几种：string:自己写表达式；enum：枚举名。 
23.     // 一般情况下，枚举名在formValidatorReg.js里设置，该脚本里已经默认带了几个常用正则表达式。你可以自己修改、添加formValidatorRegex.js里的枚举项目名和表达式。 
24.     onError:String, //发生错误的提示。 
25. }); 
26. $("#xx").formValidator({}).functionValidator({ 
27.     fun:Function, //属性名:外部函数名。    调用外部函数进行校验，提供2个参数： 
28.     //参数1:元素的值, 
29.     //参数2:元素对象。 
30.     //返回值，有以下几种类型： 
31.     //true: 校验成功 
32.     //false: 校验失败 
33.     //字符串:校验失败，返回值当作自定义错误信息，将显示在提示层上 
34.     //无: 仅当一个处理过程。 
35.     //可以写匿名函数 
36.     onError:String, //发生错误时显示 
37. }); 
38. $("#xx").formValidator({}).passwordValidator({ 
39.     compareID:String //比较控件ID。例如，密码不能于用户名相同，则该参数为用户名的ID，错误提示用参数onErrorCompareSame 
40.     onErrorCompareSame:String //值相同的错误提示。本参数要在compareID不为空的情况下才会起作用。如果想去掉该校验规则，本参数设置为空即可 
41.     onErrorContinueChar:String //连续字符的错误提示。    默认不允许把连续字符当做密码。例如“123456”是非法密码。如果想去掉该校验规则，本参数设置为空即可 
42.     onErrorSameChar:String //字符相同的错误提示。    默认不允许把相同字符当做密码。例如“111111”是非法密码。如果想去掉该校验规则，本参数设置为空即可 
43. }); 
44. $("#xx").formValidator({}).ajaxValidator({ 
45.     type:String, //请求的类型，默认"GET"。 
46.     url:String, //发送到的URL地址，默认当前页地址。在服务器端，你可以通过name为clientid获取触发验证的控件ID名 
47.     dataType:String, //返回的数据类型，默认:"html"。包含以下几种类型：xml、html、script、json、text 
48.     timeout:Number, //超时设置，默认999。 
49.     data:Object,String, //数据 
50.     async:Boolean, //是否异步发送，默认true。 
51.     success:Function, //成功时的回调函数。 
52.     processData:Object|String， //是否转换为对象，默认true。 
53.     complete:Function, //完成时的调用函数。ajax请求结束的回调函数 
54.     beforeSend:Function, //请求前调用的函数。 
55.     buttons:String, //你点提交的按钮(组)对象。 当你触发了ajax校验，在发送之前，buttons里对应的按钮（组）就会灰掉，一直等待服务器返回数据为止，就重新亮起来 
56.     error:Function, //失败时的回调函数。 
57.     onWait:String, //正在校验的提示，默认："正在等待服务器返回数据"。已经发送，但是服务器还未返回数据时候的提示消息。 
58.     onError:Object|String, //校验没有通过的提示，默认："服务器校验没有通过".该参数的类型有2种 
59.     //1、字符串。发生错误时候的提示消息。2、函数。有两个参数，参数1：当前值 参数2：当前控件对象(dom) 
60. }); 
61. </script> 

1. <form name="newregform" id="newregform" method="post" action="/reg.me?act=doreg">  
2. <input name="uname" id="uname" type="text" />  
3. <span class="onError" id="unameTip"></span>  
4. <li>  
5. <div class="biaospan3">密码:</div>  
6.     <div class="biaospan2"><input name="pwd1" id="pwd1" type="password"/></div>  
7.     <div class="lright"><span class="onError" id="pwd1Tip"></span></div>  
8. </li>  
9.     <li>  
10.     <div class="biaospan3">确认密码:</div>  
11.     <div class="biaospan2"><input name="pwd2" id="pwd2" type="password"/></div>  
12.     <div class="lright"><span class="onError" id="pwd2Tip"></span></div>  
13.     </li>  
14.    
15. <li>  
16. <div class="biaospan3">电子邮箱:</div>  
17. <div class="biaospan2"><input name="email" id="email" type="text" size="30"/></div>  
18. <div class="lright"><span class="onError" id="emailTip"></span></div>  
19. </li>  
20. </form>  

1. <script type="text/javascript">  
2. $(document).ready(function(){  
3. $.formValidator.initConfig({validatorGroup:"1",formId:"newregform",onError:function(msg){alert(msg)}});  
4.     $("#uname").formValidator({onShow:"请输入昵称",onFocus:"最多20个字符",onCorrect:"输入正确"}).inputValidator({min:1,max:20,empty:{leftEmpty:false,rightEmpty:false,emptyError:"昵称两边不能有空格"},onError:"昵称不能为空"}).ajaxValidator({  
5.         type : "post",  
6.         cache : false,  
7.         url : "../UserControl/Ajax.aspx",  
8.         datatype : "json",  
9.         addidvalue : true,  
10.         data : { "func": "CheckUserName","username": function () { return $("#UserName").val()} },  
11.         success : function(data){  
12.             if(data == "success" ){  
13.                 return true;              
14.             }else{  
15.                 return false;                 
16.             }  
17.         },  
18.         buttons: $("#regbtn"),  
19.         error: function(){alert("服务器忙，请重试");},  
20.         onerror : "您注册的昵称已存在",  
21.         onwait : "正在对昵称进行校验..."  
22.    
23.     });  
24.    //dataType: "enum" 
25.     $("#email").formValidator({onShow:"请输入邮箱",onFocus:"最多80个字符",onCorrect:"输入正确"}).inputValidator({min:1,max:80,empty:{leftEmpty:false,rightEmpty:false,emptyError:"邮箱两边不能有空格"},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})(]?){1}quot;,onError:"邮箱格式不正确"}).ajaxValidator({  
26.         type : "post",  
27.         cache : false,  
28.         addidvalue : true,  
29.         url : "/servlet/newspace",  
30.         datatype : "html",  
31.         data : "act=new_vemail",  
32.         success : function(data){  
33.             if(data == "success" ){  
34.                 return true;  
35.             }else{  
36.                 return false;  
37.             }  
38.         },  
39.         buttons: $("#regbtn"),  
40.         error: function(){alert("服务器忙，请重试");},  
41.         onerror : "您注册的邮箱已存在",  
42.         onwait : "正在对邮箱进行校验..."  
43.     });  
44. $("#pwd2").formValidator({onshow:"确认密码不能为空",onfocus:"最多20个字符",oncorrect:"输入正确"}).inputValidator({min:1,max:20,empty:{leftempty:false,rightempty:false,emptyerror:"确认密码两边不能有空格"},onerror:"确认密码不能为空"}).compareValidator({desid:"pwd1",operateor:"=",datatype:"string",onerror:"确证密码不一致"});  
45. });  
46. </script> 

1. function SubmitInfo() { 
2.             if ($.formValidator.pageIsValid('1') == true) {//先判断验证是否通过 
3.                 $.post( 
4.                  "Ajax.aspx", 
5.                 { func: "UserRegist", username: $("#UserName").val(), pwd: $("#Pwd2").val() }, 
6.                 function (data) { 
7.                     if (data = "false") { 
8.                         art.dialog({ title: '提示', content: '用户注册失败，请重新尝试或联系管理员！', icon: 'error' }); 
9.                     } 
10.                 } 
11.             ); 
12.             }           
13.         }