jQuery formValidator表单验证插件使用总结

　　　jQuery formValidator是一个基于jQuery类库的表单验证插件，一个页面可以划分多个校验组，每个组的校验都是互不影响。对一个表单对象，只需要写一行代码就可以轻松实现许多脚本控制。目前支持5种大的校验方式，分别是：inputValidator(针对input、textarea、select控件的字符长度、值范围、选择个数的控制)、compareValidator(提供两个对象的比较、目前可以比较字符串和数值型)、ajaxValidator(通过ajax到服务器上做数据校验)、regexValidator(提供可扩展的正则表达式库)、functionValidator(可使用外部函数来做校验)。本插件的特点：

　　　　1.校验功能可以扩展。对中文、英文、数字、整数、实数、Email地址格式、基于HTTP协议的网址格式、电话号码格式、手机号码格式、货币格式、邮政编码、身份证号码、QQ号码、日期等等这些控制，该插件是通过外部js文件来扩展的，可以通过正则表达式和函数来无限的扩展这些功能。

　　　　2.实现了校验代码与html代码的完全分离。所有校验信息只要在js上配置，使html和js分离。

　　　　3.只需要写一行代码就能完成一个表单元素的所有校验。支持以下的控制：

　　　　　　支持所有类型客户端控件的校验；

　　　　　　支持jQuery所有的选择器语法；

　　　　　　支持函数和正则表达式的扩展，提供formValidatorRegex.js文件，可以添加、修改里面的内容；

　　　　　　支持两种校验模式。一：文字提示，二：弹出窗口模式；

　　　　　　支持多个校验组，如果页面有多个提交按钮，分别作不同的提交，提交前要做不同的校验，就用得到分组校验；

　　　　　　支持四种状态的信息提示，可以灵活的控制显示哪种状态。一：刚打开网页时进行提示；二：获得焦点时进行提示；三：失去焦点验证成功时进行提示；四：失去焦点校验失败时的错误提示；

　　　　　　支持自动构建提示层，可以进行精确的定位。

　　　　　　支持自定义提示信息；

　　　　　　支持控件的字符长度、值范围、选择个数的控制。值范围支持数值型和字符型；选择的个数支持radio/checkbox/select三种控件；

　　　　　　支持两个控件值的比较，目前(Version3.3)可以比较字符串和数据型；

　　　　　　支持服务器端校验；

　　　　　　支持输入格式的校验。

　　　　猫冬还提供了formValidator代码生成器 方便校验js的生成。 

 　　　　使用方法：添加头部引用

代码

// 加载jQuery类库
< script src = " jquery_last.js "  type = " text/javascript " >< / script>
// 加载插件的样式库，如果你是自动构建提示层，请加载validatorAuto.css
< link type = " text/css "  rel = " stylesheet "  href = " style/validator.css " >< / link>
// 加载插件
< script src = " formValidator.js "  type = " text/javascript " >< / script>
// 加载扩展库
< script src = " formValidatorRegex.js "  type = " text/javascript " >< / script>

复制代码

　　　　示例：

代码

< form  name ="newregform"  id ="newregform"  method ="post"  action ="/reg.me?act=doreg" >
< input  name ="uname"  id ="uname"  type ="text"   />
< span  class ="onError"  id ="unameTip" ></ span >
< li >
< div  class ="biaospan3" > 密码: </ div >
     < div  class ="biaospan2" >< input  name ="pwd1"  id ="pwd1"  type ="password" /></ div >
     < div  class ="lright" >< span  class ="onError"  id ="pwd1Tip" ></ span ></ div >
</ li >
     < li >
     < div  class ="biaospan3" > 确认密码: </ div >
     < div  class ="biaospan2" >< input  name ="pwd2"  id ="pwd2"  type ="password" /></ div >
     < div  class ="lright" >< span  class ="onError"  id ="pwd2Tip" ></ span ></ div >
     </ li >
 
< li >
< div  class ="biaospan3" > 电子邮箱: </ div >
< div  class ="biaospan2" >< input  name ="email"  id ="email"  type ="text"  size ="30" /></ div >
< div  class ="lright" >< span  class ="onError"  id ="emailTip" ></ span ></ div >
</ li >
</ form >
 
//下面是js代码
< script  type ="text/javascript" >
$(document).ready( function (){
$.formValidator.initConfig({validatorgroup: " 1 " ,formid: " newregform " ,onerror: function (msg){alert(msg)}});
    $( " #uname " ).formValidator({onshow: " 请输入昵称 " ,onfocus: " 最多20个字符 " ,oncorrect: " 输入正确 " }).inputValidator({min: 1 ,max: 20 ,empty:{leftempty: false ,rightempty: false ,emptyerror: " 昵称两边不能有空格 " },onerror: " 昵称不能为空 " }).ajaxValidator({
        type :  " post " ,
        cache :  false ,
        url :  " /servlet/newspace " ,
        datatype :  " html " ,
        addidvalue :  true ,
        data :  " act=new_vname " ,
        success :  function (data){
             if (data  ==   " success "  ){
                 return   true ;            
            } else {
                 return   false ;                
            }
        },
        buttons: $( " #regbtn " ),
        error:  function (){alert( " 服务器忙，请重试 " );},
        onerror :  " 您注册的昵称已存在 " ,
        onwait :  " 正在对昵称进行校验... "
 
    });
 
    $( " #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})(]?)$ " ,onerror: " 邮箱格式不正确 " }).ajaxValidator({
        type :  " post " ,
        cache :  false ,
        addidvalue :  true ,
        url :  " /servlet/newspace " ,
        datatype :  " html " ,
        data :  " act=new_vemail " ,
        success :  function (data){
             if (data  ==   " success "  ){
                 return   true ;
            } else {
                 return   false ;
            }
        },
        buttons: $( " #regbtn " ),
        error:  function (){alert( " 服务器忙，请重试 " );},
        onerror :  " 您注册的邮箱已存在 " ,
        onwait :  " 正在对邮箱进行校验... "
    });
$( " #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: " 确证密码不一致 " });
});
</ script >

复制代码