1、jquery validate表单验证

onway417

浏览: 91128 次

最近访客更多访客>>

非法用户

dxr19870317

fengyonglei

dfeng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

WEB-FRONT

简单入门：

<%@ 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

分享到：

36、servlet--防止表单重复提交 | 35、servlet--servletContext

2015-03-23 12:09
浏览 711
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论