简单入门:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'login.jsp' starting page</title>
<script type="text/javascript" src="<%=path %>/resourses/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="<%=path %>/resourses/jquery.validate.min.js"></script>
<script type="text/javascript" src="<%=path %>/resourses/messages_cn.js"></script>
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#myform").validate({
submitHandler:function() {
form.submit();
}
});
});
</script>
</head>
<body>
<legend>用户注册</legend>
<form id="myform" action="<%=path %>/index.jsp">
<input type="text" name="email" class="required email" value="1@"/><br/>
<input type="submit" value="Submit" />
</form>
</body>
</html>
messages_cn.js:
jQuery.extend(jQuery.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为{0} 的值"),
min: jQuery.validator.format("请输入一个最小为{0} 的值")
});
1、使用方式:
1:使用默认验证规则,例子:
电子邮件 + 必填
<input id="email" class="required email" value="email@" />
2:中自定义验证规则,例子:
注:jquery与validate的版本对应,搞了很久
使用class="{}"的方式,必须引入包:jquery.metadata.js修改提示内容:
自定义(必填,长度[3,5])
<input id="complex" value="hi" class="{required:true,minlength:3, maxlength:5,
messages:{required:'为什么不输入一点文字呢',minlength:'输入的太少了',maxlength:'输入那么多干嘛'}}" />
但是最新的jquery.validate 1.11竟然没有内置metadata的支持,故需要对其进行一些改造
搜索jquery.validate.js文件中的$.validator.classRules(element),并在其前加入以下行:
$.validator.metadataRules(element),
再搜索 staticRules:, 在其前面加入以下代码,增加metadata的支持:
metadataRules: function(element) {
if (!$.metadata) return {};
var meta = $.data(element.form, 'validator').settings.meta;
return meta ?
$(element).metadata()[meta] :
$(element).metadata();
},
<script type="text/javascript" src="<%=path %>/resourses/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="<%=path %>/resourses/jquery.validate.js"></script>
<script type="text/javascript" src="<%=path %>/resourses/jquery.metadata.js"></script>
<script type="text/javascript" src="<%=path %>/resourses/messages_cn.js"></script>
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#myform").validate({
//替代submit();
submitHandler:function() {
form.submit();
}
});
$("#reset").click(function() {
validator.resetForm();
});
});
</script>
</head>
<body>
<legend>用户注册</legend>
<form id="myform" action="<%=path %>/index.jsp">
<input id="complex" class="{required:true}" />
<input class="submit" type="submit" value="Submit"/>
</form>
</body>
密码:
<input id="password" name="password" type="password" class="{required:true,minlength:6}" /><br>
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:6,equalTo:'#password'}" />
但是默认的class是用来定义css样式类名的,在这里作为作为验证规则使用,会造给样式维护带来太多不便的, 有两种方式解决这个问题:
A. 直接修改 jquery.metadata.js, type修改为attr, name修改为validate,表示从表单项的validate属性取得验证规则
B. 在页头中调用 $.metadata.setType(‘attr’,'validate’), 表示从表单项的validate属性取得验证规则
摘自:http://www.cnblogs.com/yanjunwu/p/3764740.html