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

复制代码