jQuery Validate简单实例

来源：互联网发布：粤语网络男女合唱新歌编辑：程序博客网时间：2024/05/22 00:19

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）控制台运行结果

Diana123456123456

阅读全文

0 0