表单验证插件jQuery.validate.js

大家好,我们又见面了.昨天我们讲了原生JS DOM对象和jQuery对象的区别和相互转换,今天我们来讲一下我们工作中经常用到的一个插件------表单验证插件jQuery.validate.js.

在用它之前要先引入jQuery,因为它是依赖jQuery的.

我们先来写一个简单的页面布局   如:

<form action="" >

　　<p>

　　　　<lable for="user">username:</lable>

　　　　<input type="text" name="username" />

　　</p>

　　<p>

　　　　<lable for="pass">password:</lable>

　　　　<input type="text" name="password" />

　　</p>

　　<input type="submit" value="登录" />

　　<input type="submit" value="注册" />

</form>

样式就随个人喜好随便加一些吧.

好,接下来我们写JS部分  如下:

$("#form").validate({ //验证所选取的form
　　rules:{            //验证的规则自定义规则,key:value 的形式,key 是要验证的元 素,value 可以是字符串或对象 
　　　　username:{ //表单的name
　　　　　　required:true,  //表示必填
　　　　　　minlength:3,   //设置最小长度
　　　　　　maxlength:9   //设置最大长度
　　　　　},
　　password:{　　//密码的规则同上,当然你也可一自己加一些规则
　　　　　　required:true,
　　　　　　minlength:3,
　　　　　　maxlength:9
　　　　　}
　　},
　　messages:{  //自定义的提示信息 key:value 的形式 key 是要验证 的元素,值是字符串或函数 
　　　　username:{
　　　　　　required:"此项必填",//
　　　　　　minlength:"最小6位",
　　　　　　maxlength:"最大9位"
　　  　　 },
　　password:{
　　　　　　required:"此项必填",
　　　　　　minlength:"最小6位",
　　　　　　maxlength:"最大9位"
　　　　}
　　ignore:"#pass2",//对某些元素不进行验证
　　submitHandler:function(){//定义表单验证成功以后要做的事情
　　　　alert(123);
　　　}
　　},
　　invalidate:function(){//表单验证不通过时执行的方法
　　　　alert("no")
　　},
　　focusInvalid:true,//提交表单后,未通过验证的表单(第一个或提交之 前获得焦点的未通过验证的表单)会获得焦点 
　　focusCleanup:true,//当未通过验证的元素获得焦点时,并移除错误提示 （避免和 focusInvalid.一起使用）

　　errorClass:"on",//指定错误提示的 css 类名,可以自定义错误提示的 样式 
　　wrapper:"div",//使用什么标签标记错误 
　　highlight:function(element,errorClass){//可以给未通过验证的元素加效果,闪烁等 
　　　　$(element).addClass(errorClass);
　　　　$(element).fadeOut().fadeIn();
　　　}
　　})
    $.validator.addMethod("PostCode",function(value){//自定义验证规则
     var reg=/^[0-9]{6}$/;
     return reg.test(value);
    },'必须是数字');

以上就是这个插件中最常用的一些方法,剩下的方法如果有需要可以自己去API查,网址是file:///D:/wamp/www/ajax/jquery.validation/jQuery.validate.js+API中文.pdf,希望对你有帮助,我们明天见.