jQuery Validate

honeyth

2013-10-15

Jquery Validation

一:import 相关的 css 和 image 以及jQuery

<link rel="stylesheet" type="text/css" href="../js/css/screen.css" />
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>

二：几种常见的验证方式：

方案一：rules定义该字段适用哪些规则，messages定义该字段验证出错应该有哪些相应的提示信息

<script type="text/javascript">
		$(document).ready(function(){
				$("#myform").validate({
						rules:{
								username:"required",//username must be the name attribute 
								address:{
									required:true,
									minlength:3
								},
								age:"digits",
								pwd:"required",
								repassword:{
									equalTo:"#pwd"
								}
						},
						messages:{
								username:"username not be null",//the messages be showed when input is null
								address:{
									required:"用户地址必须输入",
									minlength:"地址不能小于3位"
								},
								age:"age must be the integer",
								pwd:"密码必须输入",
								repwd:"两次密码不一致"
						}
				});
		});
</script>

方案二：import jquery.metadata.js

<script type="text/javascript" src="js/jquery.metadata.js"></script>

$(function(){
    $("#myform").validate({meta:"validate"});
});

<body>
    <form id="myform" action="#">
        Username:<input type="text" id="username" name="username"     class="{validate:{required:true, messages:{required:'Please enter your email address'}}}"/><br/>
        Address:<input type="text" id="address" name="address" class="{validate:{required:true,messages:'地址不能为空'}}"/><br>	
        Age:<input type="text" id="age" name="age"/><br/>
        password:<input type="text" id="pwd" name="pwd"/><br/>
        confirm password:<input type="text" id="cpwd" name="cpwd"/><br/>
        <input type="submit" />
    </form>
</body>

方案三：默认的写法：

$(function(){
      $("#myform").validate();
})；

<body>
		<form id="myform" action="#">
			Username:<input type="text" id="username" name="username" class="{required:true, messages:{required:'Please enter your email address'}}"/>
			<br/>
			Address:<input type="text" id="address" name="address" class="{required:true,messages:'地址不能为空'}"/>
			<br/>
			Age:<input type="text" id="age" name="age"/>
			<br/>
			password:<input type="text" id="pwd" name="pwd"/>
			<br/>
			confirm password:<input type="text" id="cpwd" name="cpwd"/>
			<br/>
			<input type="submit" />
		</form>
	</body>

方案四：基于ajax的异步验证：

<form action="register.do" method="post" id="register">
	Username:<input type="text" id="studentname" name="studentname"/><br/>
	Password:<input type="password" id="password" name="password"/><br/>
	ConfirmPwd:<input type="password" id="rePwd" name="rePwd"/><br/>
	Email:<input type="text" id="email" name="email"/><br/>
	<input type="submit"/>
</form>

$("#register").validate({
	rules:{
		studentname:"required",
		password:"required",
		rePwd:{
			equalTo:"#password"
		},
		email:"email"
	},
	messages:{
		studentname:"用户名不能为空",
		password:"用户密码不能为空",
		rePwd:"确认密码必须和密码一致",
		email:"邮件格式不正确"
	},
	submitHandler:function(){
		$.get("v.do?studentname="+$("#studentname").val(),function(data){
			if(!data) {
				$("#studentname").after("该学生已经存在");
			}
		});
	}
});

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ValidateServlet
 */
public class ValidateAddStudentServlet extends HttpServlet {
	private static final List<String> studentList = new ArrayList<String>();
    public ValidateAddStudentServlet{
        studentList.add("Nicky");
        studentList.add("Alice");
        studentList.add("Tony");
        studentList.add("Geoger");
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
			String studentName = request.getParameter("studentName");
			response.setContentType("text/json;charset=utf-8");
			if(studentList.contains(studentName)) {
					response.getWriter().println("false");
			} else {
					response.getWriter().println("true");
			}
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
			doGet();
	}

}

错误在统一的地方显示：

$(document).ready(function(){
$("#myform").validate({

errorLabelContainer:$("#myform div .error");
});

<html>

<form id="myform">

</form>

<div class="error"></div>

<html>

jquery validate 脚本