首页 > 代码库 > 学习jQuery formValidator

学习jQuery formValidator

使用插件必须加载的文件

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

主要函数

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

使用流程
1. 编写全局配置函数:

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

2. 编写单个控件配置函数

 

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

3. 对单个控件编写 验证函数

 

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

 

 

举例;

 

[html] view plaincopy
    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>  
    21.    
    22. //下面是js代码  
    23. <script type="text/javascript">  
    24. $(document).ready(function(){  
    25. $.formValidator.initConfig({validatorgroup:"1",formid:"newregform",onerror:function(msg){alert(msg)}});  
    26.     $("#uname").formValidator({onshow:"请输入昵称",onfocus:"最多20个字符",oncorrect:"输入正确"}).inputValidator({min:1,max:20,empty:{leftempty:false,rightempty:false,emptyerror:"昵称两边不能有空格"},onerror:"昵称不能为空"}).ajaxValidator({  
    27.         type : "post",  
    28.         cache : false,  
    29.         url : "/servlet/newspace",  
    30.         datatype : "html",  
    31.         addidvalue : true,  
    32.         data : "act=new_vname",  
    33.         success : function(data){  
    34.             if(data == "success" ){  
    35.                 return true;              
    36.             }else{  
    37.                 return false;                 
    38.             }  
    39.         },  
    40.         buttons: $("#regbtn"),  
    41.         error: function(){alert("服务器忙,请重试");},  
    42.         onerror : "您注册的昵称已存在",  
    43.         onwait : "正在对昵称进行校验..."  
    44.    
    45.     });  
    46.    
    47.     $("#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({  
    48.         type : "post",  
    49.         cache : false,  
    50.         addidvalue : true,  
    51.         url : "/servlet/newspace",  
    52.         datatype : "html",  
    53.         data : "act=new_vemail",  
    54.         success : function(data){  
    55.             if(data == "success" ){  
    56.                 return true;  
    57.             }else{  
    58.                 return false;  
    59.             }  
    60.         },  
    61.         buttons: $("#regbtn"),  
    62.         error: function(){alert("服务器忙,请重试");},  
    63.         onerror : "您注册的邮箱已存在",  
    64.         onwait : "正在对邮箱进行校验..."  
    65.     });  
    66. $("#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:"确证密码不一致"});  
    67. });  
    68. </script> 

 

学习jQuery formValidator