jquery validate 简单使用_jquery validate test-CSDN博客

本文链接：https://blog.csdn.net/Test_LD/article/details/22194899

参考网上讲解简单整理  http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html


<%@ 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 src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
</head>
<body>
 

<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" />
 </p>
 <p>
  <label for="confirm_password">确认密码</label>
  <input id="confirm_password" name="confirm_password" type="password" />
 </p>
    <p>
        <input class="submit" type="button" value="Submit" id="submit"/>
    </p>
</form>

<script type="text/javascript">

$().ready(function() {
	 $("#signupForm").validate({
	        rules: {
	   // 根据标签的name属性
	   firstname: {required:true,maxlength:5},
	   email: {
	    required: true,
	    email: true
	   },
	   password: {
	    required: true,
	    minlength: 5,
	    maxlength:10
	   },
	   confirm_password: {
	    required: true,
	    minlength: 5,
	    equalTo: "#password"
	   }
	  },
	  //messages处，如果某个控件没有message，将调用默认的信息
	  // 验证失败信息
	   messages: {
	   firstname: {required:"请输入姓名",
		   maxlength:"xxxxxxxxxx"
	   },
	   email: {
	    required: "请输入Email地址",
	    email: "请输入正确的email地址"
	   },
	   password: {
	    required: "请输入密码",
	    minlength: jQuery.format("密码不能小于{0}个字 符")
	   },
	   confirm_password: {
	    required: "请输入确认密码",
	    minlength: "确认密码不能小于5个字符",
	    equalTo: "两次输入密码不一致不一致"
	   }
	  }
	    });
	});
// 如果是submit按钮不需要下面的处理
// 如果是普通的btn 如下处理	
$("#submit").click(
        function(){
  if($("#signupForm").valid()){
    	$("#signupForm").submit();
  }
});
</script>
</body>
</html>

<%@ 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 src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
</head>
<body>
 

<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" />
 </p>
 <p>
  <label for="confirm_password">确认密码</label>
  <input id="confirm_password" name="confirm_password" type="password" />
 </p>
    <p>
        <input class="submit" type="button" value="Submit" id="submit"/>
    </p>
</form>
<div id="errorInfo"></div>
<script type="text/javascript">

$().ready(function() {
	$.validator.setDefaults({
		   debug: true,
		 /*   errorPlacement: function(error, element) {  
			    error.appendTo($("#errorInfo")); 
			 
		   }, */
	//errorContainer: "#errorInfo",
	// 改变错误信息显示位置
	errorLabelContainer: $("#errorInfo"),
	// 包围错误信息标签
	wrapper: "li"	
		});
	
	 $("#signupForm").validate({
	        rules: {
	   // 根据标签的name属性
	   firstname: {required:true,maxlength:5},
	   email: {
	    required: true,
	    email: true
	   },
	   password: {
	    required: true,
	    minlength: 5,
	    maxlength:10
	   },
	   confirm_password: {
	    required: true,
	    minlength: 5,
	    equalTo: "#password"
	   }
	  },
	  //messages处，如果某个控件没有message，将调用默认的信息
	  // 验证失败信息
	   messages: {
	   firstname: {required:"请输入姓名<br/>",
		   maxlength:"xxxxxxxxxx"
	   },
	   email: {
	    required: "请输入Email地址<br/>",
	    email: "请输入正确的email地址"
	   },
	   password: {
	    required: "请输入密码 <br/>",
	    minlength: jQuery.format("密码不能小于{0}个字 符 <br/>")
	   },
	   confirm_password: {
	    required: "请输入确认密码",
	    minlength: "确认密码不能小于5个字符",
	    equalTo: "两次输入密码不一致不一致"
	   }
	  }
	    });
	});
// 如果是submit按钮不需要下面的处理
// 如果是普通的btn 如下处理	
$("#submit").click(
        function(){
  if($("#signupForm").valid()){
    	$("#signupForm").submit();
  }
});
</script>
</body>
</html>