大家好,我们又见面了.昨天我们讲了原生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,希望对你有帮助,我们明天见.