jQuery的基础部分前面都讲完了，那么就看插件了。
关于jQuery表单验证插件-Validation
validation特点：
- 内置验证规则：拥有必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则
- 自定义验证规则：可以很方便地自定义验证规则
- 简单强大的验证信息提示：默认了验证信息提示，并提供了自定义覆盖默认提示信息的功能
- 实时验证：可以通过keyup或者blur事件触发验证，而不仅仅在表单提交的时候验证
使用方法：
- 引用jQuery库和Validation插件
<script type="text/javascript" src="jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script> - 确定哪个表单需要被验证，那么就调用即可
$("#myForm").validate(); - 针对不同的字段，进行验证规则编码，设置字段相应的属性
<input id="username" name="username" class="required email" minilength="2" />
<!--在上面设置 required为必填，email验证是否为邮箱，如果是url就验证是否为url，minilength=2为最小长度为2---->
更好的使用方法：
下面的玩法是为了实现与HTML元素无关联，通过name属性来关联字段和验证规则的验证写法，这种写法能实现行为和结构的分离。
- 页面
<input id="myname" name="username"/>
- 代码
$("#myform").validate({
rules:{
username:{
required:true,
minlength:2,
email:true
},
url:"url",
comment:"required"
}
});
国际化
就是这个插件的验证信息默认是英文的。那么要弄成中文，就要引用新的文件：
jquery.validate.messages_cn.js
自定义验证信息
valication插件可以很方便地自定义验证规则。
$("#myform").validate({
rules:{
username:{
required:true,
minlength:2,
email:true
}
}
,messages:{
username:{
required:'请输入账户邮箱',
email:'请输入正确的邮箱地址'
}
}
});
自定义验证信息并美化
例如为验证提示信息加入图片：
$("#myform").validate({
rules:{
username:{
required:true,
minlength:2,
email:true
}
}
,errorElement:"myErrorElement"//用来创建错误信息提示标签
,success:function(label){//验证成功后执行的回调函数
//label指向上面那个错误提示信息标签myErrorElement
label.text("") //清空错误消息提示
.addClass("success");//加入自定义的success类
}
});
然后在css里面加入对应样式：
myErrorElement.error{
background:url("2.ico") no-repeat 0px 0px;
padding-left:48px;
}
myErrorElement.success{
background:url("1.png") no-repeat 0px 0px;
padding-left:48px;
}
自定义验证规则
以下为用此jQuery插件实现验证码功能的代码
- 页面
<p>
<label for="myValcode">验证码</label>
<input id="myValcode" name="valcode">=7+9
</p> - 代码
//自定义一个验证方法
$.validator.addMethod(
"formula",
function(value,element,param){
return value==eval(param);
},
'请正确输入数学公式计算后的结果'
);
//调用该验证规则
$("#myform").validate({
rules:{
username:{
required:true,
minlength:2,
email:true
}，
valcode:{formula:7+9}
}
});