表单验证插件jQuery.validate.js

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

在用它以前要先引入jQuery,由于它是依赖jQuery的.

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

<form action="" id="form">

　　<p>

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

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

　　</p>

　　<p>

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

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

　　</p>

　　<input type="submit" value="登陆" id="lgn"/>

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

</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,但愿对你有帮助,咱们明天见.