jQuery Validate简单实例

Borny鼎鼎

已于 2023-07-11 11:19:15 修改

阅读量488

点赞数

分类专栏：其他文章标签： jquery

于 2017-06-13 11:17:31 首次发布

本文链接：https://blog.csdn.net/vinegar93/article/details/73163616

版权

其他专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1、jQuery Validate

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。

2、简单实例

（1）项目结构

（2）index.jsp

<%@ 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=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
	.error{
		color:red;
	}
</style>
<script type="text/javascript" src="js/jquery-validation-1.14.0/lib/jquery.js"></script>
<script type="text/javascript" src="js/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#form").validate({
			rules: {
				username: {
			    	required: true,
			        minlength: 2,
			        remote: {
			            url: "/jQueryValidate/BServlet",//后台处理程序
			            type: "post",//数据发送方式
			            dataType: "json",//接受数据格式   
			            data: {//要传递的数据
			                username: function() {
			                    return $("#username").val();
			                }
			            }
			        }
		      	},
		      	password: {
			        required: true,
			        minlength: 5
			    },
			    confirm_password: {
			        required: true,
			        minlength: 5,
			        equalTo: "#password"
			    }
			},
		    messages: {
		    	username: {
		            required: "请输入用户名",
		            minlength: "用户名必需由两个字母组成",
		            remote: "用户名已经被注册"
		        },
		        password: {
		            required: "请输入密码",
		            minlength: "密码长度不能小于 5 个字母"
		        },
		        confirm_password: {
		            required: "请输入密码",
		            minlength: "密码长度不能小于 5 个字母",
		            equalTo: "两次密码输入不一致"
		        }
		    },
		    errorPlacement: function(error, element) {  
		        error.appendTo(element.parent());
		    },
		    debug: false,
		    submitHandler: function(form) {
	            form.submit();
	        }
		});
	});
</script>
</head>
<body>
	<form id="form" action="/jQueryValidate/AServlet" method="post">
		<p>
	      	<label for="username">用户名</label>
			<input type="text" id="username" name="username" />
		</p>
		<p>
	      	<label for="password">密码</label>
			<input type="password" id="password" name="password" />
		</p>
		<p>
	      	<label for="confirm_password">确认密码</label>
			<input type="password" id="confirm_password" name="confirm_password" />
		</p>
		<p>
	      	<input type="submit" value="提交" />
		</p>
	</form>
</body>
</html>

（3）AServlet.java

package com.jqv.servlet;

import java.io.IOException;

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

public class AServlet extends HttpServlet {

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String username = request.getParameter("username");
		System.out.println(username);
		String password = request.getParameter("password");
		System.out.println(password);
		String confirm_password = request.getParameter("confirm_password");
		System.out.println(confirm_password);
	}

}

（4）BServlet.java

package com.jqv.servlet;

import java.io.IOException;

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

public class BServlet extends HttpServlet {
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		String username = request.getParameter("username");
		if (username.equals("Tom") || username.equals("Jerry")) {
			response.getWriter().print(false);
		} else {
			response.getWriter().print(true);
		}
	}

}

（5）web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>jQueryValidate</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <servlet-name>AServlet</servlet-name>
    <servlet-class>com.jqv.servlet.AServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>AServlet</servlet-name>
    <url-pattern>/AServlet</url-pattern>
  </servlet-mapping>
  <servlet>
    <servlet-name>BServlet</servlet-name>
    <servlet-class>com.jqv.servlet.BServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>BServlet</servlet-name>
    <url-pattern>/BServlet</url-pattern>
  </servlet-mapping>
</web-app>

（6）页面运行结果

（7）控制台运行结果

Diana
123456
123456

Borny鼎鼎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery Validate简单实例

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。（7）控制台运行结果。
复制链接

扫一扫