Jquery Validate 总结
做前台页面碰见了一些验证的问题，用jquery
Validate 比较方便，下面总结一下：
1.准备工作：
1.导入js库：
<script type="text/javascript"src="<%=path %>/validate/jquery.js" />
<script type="text/javascript"src="<%=path %>/validate/jquery.validate.js"/>
2.时间插件：
<script src="https://cdn.bootcss.com/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.js"></script>
2.代码：
<%@page import="java.util.*"
%>
<%@ page language="java"pageEncoding="UTF-8"
%>
<%@taglib prefix="c"uri="http://java.sun.com/jsp/jstl/core"
%>
<%@ taglib uri="/struts-tags"prefix="s"
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt"prefix="fmt"
%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() +"://"+ request.getServerName() +":"+
request.getServerPort() + path +"/";
%>
<html lang="zh">
<head>
<title>需求填报页面</title>
<link href="<%=basePath%>css/bootstrap/css/bootstrap.min.css"type="text/css"rel="stylesheet"/>
<link href="<%=basePath%>qtPage/css/basic.css"type="text/css"rel="stylesheet"/>
<link rel="stylesheet"type="text/css"href="<%=basePath%>qtPage/css/jquery.datetimepicker.css"/>
<script type="text/javascript"src="<%=basePath%>js/jquery-1.9.1.min.js"></script>
<script type="text/javascript"src="<%=basePath%>css/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript"src="<%=basePath%>qtPage/js/fm.validator.js"/>
<script>
$(function () {
Validator.language = 'en';
});
</script>
<style>
/* .container {
margin-top: 100px;
}*/
.col-xs-12 {
margin-top: 10px;
}
.col-xs-5 strong {
float: right;
line-height: 34px;
}
label {
color: white;
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
background: red;
width: 100%;
padding: 8px;
border-radius: 0 0 5px 5px;
}
.text-danger {
color: red;
}
</style>
</head>
<body>
<div class="container"style="margin-top:
80px;">
<h2 class="text-center">信息填写页面</h2>
<h6 class="text-center
text-danger">*为必填项</h6>
<form name="need"method="post"id="jsForm"
<c:choose>
<c:when test="${not empty id}">action="<%=basePath%>XXXX.action?id=${id}"
</c:when>
<c:otherwise>action="<%=basePath%>XXXX"
</c:otherwise>
</c:choose> >
<div class="col-xs-12"style="margin-top:
15px;">
<span class="col-xs-5
"><strong>名称(<span class="text-danger">*</span>):</strong></span>
<div class="col-xs-7"style="width:
360px;">
<input type="text"class="form-control"required
data-msg-required="不能为空"data-rule-gt="true"
data-gt="0"name="technicaladvices.advicename"id="technicaladvicesAdvicename"/>
</div>
</div>
<div class="col-xs-12
" style="margin-top: 10px;">
<span class="col-xs-5
text-center"><strong>时间(<span class="text-danger">*</span>):</strong></span>
<div class="col-xs-7">
<div class="col-xs-3"style="width:
180px;padding: 0; width: 152px;">
<input type="text"class="some_class
form-control pull-left starttime"required
data-msg-required="不能为空"style=" width:
128px;"
data-rule-gt="true"data-gt="0"
autocomplete="false"placeholder="开始日期"name="starttime"
id="technicaladvicesStarttime"/>
</div>
<div class="col-xs-1"style="line-height:
32px;padding: 0;">至</div>
<div class="col-xs-3"style="padding:
0;width: 128px;">
<input type="text"class="some_class
form-control pull-left endtime"required data-msg-required="不能为空"
data-rule-gt="true"data-gt="0"autocomplete="false"
placeholder="结束日期"data-rule-compareDate="#technicaladvicesStarttime"data-msg-compareDate="结束日期不小于开始日期!"name="endtime"
id="technicaladvicesEndtime"/>
</div>
</div>
</div>
<div class="col-xs-12
">
<span class="col-xs-5
text-center center-block form-group form-group "><strong>XXX(<span
class="text-danger">*</span>):</strong></span>
<div class="col-xs-7"style="width:
360px;">
<select class="form-control"name="technicaladvices.fieldcode"id="technicaladvicesFieldcode"required>
</select>
</div>
</div>
<div class="col-xs-12">
<span class="col-xs-5
text-center center-block form-group "><strong>XXX(<span
class="text-danger">*</span>):</strong></span>
<div class="col-xs-7"style="width:
360px;">
<select class="form-control"required
name="technicaladvices.developmentstage"
id="technicaladvicesDevelopmentstage">
</select>
</div>
</div>
<div class="col-xs-12">
<span class="col-xs-5
form-group "><strong>内容(<span class="text-danger">*</span>):</strong></span>
<div class="col-xs-7"style="width:
360px;">
<textarea class="form-control"required
data-msg-required="内容不能为空"rows="6"
name="technicaladvices.content"id="technicaladvicesContent"></textarea>
</div>
</div>
<div class="col-xs-12">
<span class="col-xs-5
"><strong>联系人(<span class="text-danger">*</span>):</strong></span>
<div class="col-xs-7"style="width:
360px;">
<input type="text"class="form-control"name="technicaladvices.contacts"required
data-msg-required="不能为空"data-rule-gt="true"data-gt="0"id="technicaladvicesContacts"/>
</div>
</div>
<div class="col-xs-12">
<span class="col-xs-5
text-center center-block"><strong>所在部门(<span
class="text-danger">*</span>):</strong></span>
<div class="col-xs-7"style="width:
360px;">
<input type="text"class="form-control"name="technicaladvices.contactDepartment"required
data-msg-required="不能为空"data-rule-gt="true"data-gt="0"
id="technicaladvicesContactDepartment"/>
</div>
</div>
<div class="col-xs-12">
<span class="col-xs-5
text-center center-block"><strong>联系电话(<span
class="text-danger">*</span>):</strong></span>
<div class="col-xs-7"style="width:
360px;">
<input type="text"class="form-control"data-type="number"name="technicaladvices.contactPhone"required
data-rule-number="true"data-msg-required="不能为空"data-msg-number="请输入正确的数字"
data-msg-minlength="请输入最小6位"minlength="6"maxlength="11"id="technicaladvicesContactPhone"/>
</div>
</div>
<div class="col-xs-12">
<span class="col-xs-5
text-center center-block"><strong>传真:</strong></span>
<div class="col-xs-7"style="width:
360px;">
<input type="text"class="form-control"name="technicaladvices.contactFax"
id="technicaladvicesContactFax"/>
</div>
</div>
<div class="col-xs-12">
<span class="col-xs-5
text-center center-block"><strong>电子邮箱(<span
class="text-danger">*</span>):</strong></span>
<div class="col-xs-7"style="width:
360px;">
<input type="text"class="form-control"required
data-rule-email="true"data-msg-required="请输入email地址"
data-msg-email="请输入正确的email地址"name="technicaladvices.contactEmail"
id="technicaladvicesContactEmail"/>
</div>
</div>
<div class="col-xs-12">
<span class="col-xs-5
text-center center-block"><strong>通讯地址:</strong></span>
<div class="col-xs-7"style="width:
360px;">
<input type="text"class="form-control"name="technicaladvices.contactAddr"
id="technicaladvicesContactAddr"/>
</div>
</div>
<div class="col-xs-12
center-block" style="margin-top: 36px;margin-bottom: 36px;">
<button type="reset"class="btn
btn-info pull-left"style="margin-left:46%;">清空信息</button>
<button type="submit"id="btn"class="btn
btn-primary" style=margin-left:10px;">提交</button>
</div>
</form>
</div>
</body>
<script src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
<script src="<%=basePath%>qtPage/js/jquery.js"></script>
<script src="<%=basePath%>qtPage/js/jquery.validate.js"></script>
<script src="https://cdn.bootcss.com/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.js"></script>
<script>
//自定义jquery Validate验证时间方法
jQuery.validator.methods.compareDate =
function (value, element, param) {
var startDate =jQuery(param).val() +" 00:00:00";//补全yyyy-MM-dd HH:mm:ss格式
value = value + " 00:00:00";
var date1 =new Date(Date.parse(startDate.replace("-","/")));
var date2 =new Date(Date.parse(value.replace("-","/")));
return date1 <= date2;
};
//时间插件设置为中文
$.datetimepicker.setLocale('zh');
//点击button按钮提交
$(function () {
$("#jsForm").validate();
});
//定义时间插件显示格式
$('.some_class').datetimepicker({
lang: 'ch',
format: 'Y-m-d',
timepicker: false,
});
</script>
</html>
3.效果：
如图
4.使用方法：
1.required 必填的（直接放在文本框里）
2.data-msg-required 如果不填提示的信息是什么
3.data-rule-number 验证是否是数字
4minlength 最小长度
5.maxlength 最大长度
6.data-rule-email 是否是邮箱
说明:jquery Validate定制信息提醒有两种方式，一种是data-msg-..="",另一种是需要引入另外的js库，个人认为第一种比较方便一点，所有只说了第一种，另外自定义日期比较方法代码中有实例，可以查看，如有没写清楚，或有什么疑问，欢迎讨论、批评指教，