jQuery中的validate校验
一款优秀的表单验证插件——validation插件
特点：
- 内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则
- 自定义验证规则：可以很方便的自定义验证规则
- 简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能
- 实时验证：可以通过keyup或bulr事件触发验证，而不仅仅在表单提交的时候验证。
下载：
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
一、下载
官网地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip
帮助文档位置：http://jqueryvalidation.org/documentation/
目录结构：
目录结构.png
二、导入
validate是jQuery插件，其必须在jQuery的基础上进行运行。所以要导入jQuery库、validate库、国际化资源库（可选）
<!--依赖的jQuery库-->
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<!--validate.js是建立在jquery之上的，所以得先导入jquery的类库-->
<script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>
<!--引入国际化js文件-->
<script type="text/javascript" src="../../js/messages_zh.js" ></script>
三、使用前提
validate需要手动的声明，对哪个表单进行校验，手动方式可以使用以下4种检验方式：
<script>
$().ready(function(){
$("#formId").validate();
});
</script>
校验类型.PNG
四、检验方式：js代码方式
语法：
语法：
$(...).validate({
rules:{},
message:{}
});
rules规则语法：
rules:{
字段名：校验器,
字段名：校验器
}
校验器语法：
语法：{校验器:值,校验器:值,...}
message提示语法：
message:{
字段名:{校验器:"提示",校验器:"提示",...}
}
代码：
$("#formId").validate({
rules:{
username:{
required:true
},
password:{
required:true,
rangelength:[2,5]
},
repassword:{
equalTo:"[name='password']"
}
},
messages:{
username:{
required:"不能为空"
},
password:{
rangelength:"长度{0}-{1}之间"
}
}
});
案例：
JS代码：
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<!--引入validate插件js文件-->
<script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
<!--引入国际化js文件-->
<script type="text/javascript" src="../js/messages_zh.js" ></script>
<script>
$().ready(function(){
$("#formId").validate({
rules:{
loginname:{
required:true,
minlength:2,
maxlength:5
},
loginpwd:{
required:true,
number:true
},
reloginpwd:{
equalTo:"[name='loginpwd']"
},
email:"email",
username:{
required:true,
rangelength:[2,5]
},
gender:{
required:true
}
},
messages:{
gender:{
required:"性别必须勾选"
}
}
});
});
</script>
HTMl代码：
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
<!--在指定位置显示错误消息
*class 必须是error
*for 必须设置错误对象
-->
<label for="gender" class="error"></label>
案例代码：
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>
<script type="text/javascript" src="../../js/messages_zh.js" ></script>
<script>
$(function(){
$("#registForm").validate({
rules:{
user:{
required:true,
minlength:2
},
password:{
required:true,
digits:true,
minlength:6
},
repassword:{
required:true,
digits:true,
minlength:6,
equalTo:"[name='password']"
},
email:{
required:true,
email:true
},
username:{
required:true,
minlength:2
},
sex:{
required:true
}
},
messages:{
user:{
required:"用户名不能为空!",
minlength:"用户名不得少于2个字符!"
},
password:{
required:"密码不能为空!",
digits:"密码必须是数字!",
minlength:"密码长度不得低于6位!"
},
repassword:{
required:"确认密码不能为空!",
digits:"密码必须是数字!",
minlength:"密码长度不得低于6位!",
equalTo:"两次密码不一致!"
},
email:{
required:"邮箱不能为空!",
email:"邮箱格式不正确!"
},
username:{
required:"姓名不能为空!",
minlength:"姓名不得少于2个字符!"
},
sex:{
required:"性别必须勾选!"
}
},
errorElement: "label", //用来创建错误提示信息标签
success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
})
</script>