1、jquery validate表单验证

简单入门:
<%@ 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

你可能感兴趣的:(jQuery Validate)