jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求
访问 jQuery Validate 官网,下载最新版的 jQuery Validate 插件.
导入 js 库
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.validate.js"></script>
语法格式
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<form id="myform">......</form>
<script>
//选中表单 调用validate()方法
$("#myform").validate({
rules:{
//校验规则
},
messages:{
//自定义错误消息中文提示
},
submitHandler:function(){
//只有全部验证都通过,才会执行这部分代码
$.ajax({});//或者使用form.submit();
}
});</script>
自定义语法规则
jQuery.validator.addMethod(
//给规则起个名字
name,
//编写使用正则表达式验证的代码
function(value, element){
},
//编写错误提示信息
message
)
常用规则
序号 规则 描述
1 required:true 必须输入的字段。
2 remote:“check.php” 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6 dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7 number:true 必须输入合法的数字(负数,小数)。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
12 maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
13 minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
14 rangelength:[5,10] 输 之入长度必须介于 5 和 10间的字符串(汉字算一个字符)。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10。
案例
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.validate.js"></script>
<script type="text/javascript">
$(function() {
validate验证
//自定义验证规则
$.validator.addMethod(
"zhongwen",
function(value) {
var a=/^[\u2E80-\u9FFF]+$/;
return a.test(value);
},
"请输入中文"
)
//选中表单 调用validate()方法
$("form").validate({
rules:{
yname:{
zhongwen:true,
required:true,
rangelength:[3,5]
},
sex:{
required:true,
},
birth:{
required:true,
dateISO:true,
},
hobby:{
required:true,
},
},
messages:{
yname:{
required:"<font style='color: red'>姓名不能为空</font>",
rangelength:"<font style='color:red'>长度3~5位</font>",
},
sex:{
required:"<font style='color:red'>性别不能为空</font>",
},
birth:{
required:"<font style='color:red'>生日不能为空</font>",
dateISO:"<font style='color:red'>生日格式不正确</font>",
},
hobby:{
required:"<font style='color:red'>爱好不能为空</font>",
},
},
submitHandler:function(){
$.post("staff?action=add", $("form").serialize(), function(i) {
if(i>0){
alert("添加成功");
location="getall.jsp";
}
}, "text")
}
})
})
</script>
</head>
<body>
<form>
姓名: <input type="text" name="yname"><br>
性别:
<input type="radio" value="男" name="sex">男
<input type="radio" value="女" name="sex">女 <label for="sex" class="error"></label><br>
生日: <input type="text" name="birth"><br>
爱好:
<input type="checkbox" value="旅游" name="hobby" >旅游
<input type="checkbox" value="读书" name="hobby" >读书
<input type="checkbox" value="音乐" name="hobby" >音乐
<input type="checkbox" value="运动" name="hobby" >运动
<input type="checkbox" value="美食" name="hobby" >美食 <label for="hobby" class="error"></label><br>
部门:
<select name="bname">
</select><br>
<input type="submit" value="增加">
</form>
</body>
</html>