JQuery 表单验证框架

一、表单验证的好处

在做网站开发时，我们经常要对用户输入的内容进行约束，数据保存到服务器之前，通常要对数据格式进行检查，比如，电话号码、邮箱格式是否正确、用户名是否唯一等等。而在服务端做这种数据验证会大大加大服务器的负载，造成服务器的压力。因此我们通常会将数据验证放在客户端。客户端做表单验证的优点有以下两点：

减轻服务器的压力。
保证输入的数据符合要求。

二、JQuery Validate 简介

JQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

三、使用方法

3.1 下载

JQuery Validate 的下载地址：

官网下载地址：https://jqueryvalidation.org/

github地址： Release 1.19.5 · jquery-validation/jquery-validation · GitHub

3.2 项目中引入相关js文件

在在项目相关文件夹中放入Jquery和Jquery validate的js文件。

因为JQuery Validate，是基于Jquery框架的，所以使用之前我们需要导入jquery相关的js文件，而且一定要在导入Jquery validate文件之前导入。

3.3 在表单中添加相关验证需要的信息

下面是示例代码：

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>JSP - Hello World</title>
    <script src="js/jquery-1.4.3.js" type="text/javascript"></script>
    <script src="js/jquery.validate.min.js" type="text/javascript"></script>
    <script src="js/index_check.js" type="text/javascript"></script>
</head>
<body>
<h1><%= "Hello World!" %>
</h1>
<br/>
<a href="hello-servlet">Hello Servlet</a>
        <form id="register_form">
            <p>
                邮箱：<input type="text" name="email" id="text_email" >
                <label for="text_email" style="color:blue" class="error"></label>
            </p>
            <p>
               密码： <input type="text" name="password" id="text_password" >
                <label for="text_password" style="color:blue" class="error"></label>
            </p>
            <p>
                重复密码： <input type="text" name="re_password" id="text_re_pwd" >
                <label for="text_re_pwd" style="color:blue" class="error"></label>
            </p>
            <input type="submit" value="提交">
        </form>
</body>
</html>

说明：

引入的index_check.js 是写具体验证代码的js文件
input中的name属性是必备的，后面做验证的时候需要使用name属性值。
id 必备，后面自定义错误消息展示需要和id对应。
label标签，Jquery validate验证默认错误消息展示是展示在label标签中。
label标签中的for 要与输入框中的id对应，表示此出是为对应id的输入框显示错误消息的。
label标签中的class="error"，会通过这个定位标签，显示错误消息。

3.4 编写验证代码

在index_check.js文件中添加如下代码：

$(document).ready(function(){
    // 根据id找到需要做验证的form表单
    $("#register_form").validate({

        // 设定验证规则
        rules:{
            // 表示为name值为email的input输入框设置验证规则
            email:{
                // true表示此项为必填项
                required:true,
                // 此处的true表示必须满足email邮箱格式要求
                email: true
            },

            // 表示为name值为phone的input输入框设置验证规则
            password:{
                // 此处的true表示此项为必填项
                required: true,
                // 此处表示，密码必须是6-20位
                rangelength:[6,20]
            },
            re_password:{
                // 此处的true表示此项为必填项
                required: true,
                // 此处表示要和id位text_password 中输入的内容一致
                equalTo:"#text_password"
            }
        },
        // 设定不满足验证规则时展示的错误信息
        messages:{
            email:{
                required:"请输入邮箱",
                email:"请输入正确的Email格式"
            },
            password:{
                required:"请输入密码",
                rangelength: "密码必须是6-20位"
            },
            re_password: {
                required:"请重复密码",
                equalTo: "两次密码不一致"
            }
        }

    })
});

3.5 展示效果

页面初始效果

当什么都不输入时，直接提交表单

当输入内容不满足验证规则时

3.6 默认校验规则

序号	规则	描述
1	required:true	必须输入的字段。
2	remote:"check.php"	使用 ajax 方法调用 check.php 验证输入值。
3	email:true	必须输入正确格式的电子邮件。
4	url:true	必须输入正确格式的网址。
5	date:true	必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6	dateISO:true	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7	number:true	必须输入合法的数字（负数，小数）。
8	digits:true	必须输入整数。
9	creditcard:	必须输入合法的信用卡号。
10	equalTo:"#field"	输入值必须和 #field 相同。
11	accept:	输入拥有合法后缀名的字符串（上传文件的后缀）。
12	maxlength:5	输入长度最多是 5 的字符串（汉字算一个字符）。
13	minlength:10	输入长度最小是 10 的字符串（汉字算一个字符）。
14	rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15	range:[5,10]	输入值必须介于 5 和 10 之间。
16	max:5	输入值不能大于 5。
17	min:10	输入值不能小于 10。

3.6 异步验证

通常我们在验证表单时需要访问服务器，根据服务器的响应做进一步处理，比如在注册的时候，我们输入的邮箱经常要去服务器查一下看这个邮箱是否注册过了。 Jquery validate 中使用 ajax 方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用 data 选项。

remote: {
    url: "check-email.php",     //后台处理程序
    type: "post",               //数据发送方式
    dataType: "json",           //接受数据格式   
    data: {                     //要传递的数据
        username: function() {
            return $("#username").val();
        }
    }
}

远程地址只能输出 "true" 或 "false"，不能有其他输出。

四、综合案例：当当网中注册页面表单验证

4.1 注册页面jsp

<%@page contentType="text/html;charset=utf-8" isELIgnored="false"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>用户注册 - 当当网</title>
    <link href="../css/login.css" rel="stylesheet" type="text/css" />
    <link href="../css/page_bottom.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery-1.4.3.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="../js/user_check.js"></script>

  </head>
  <body>
    <%@include file="../common/head1.jsp"%>
      <div class="login_step">
        注册步骤:
        <span class="red_bold">1.填写信息</span> > 2.验证邮箱 > 3.注册成功
      </div>
      <div class="fill_message">
        <form name="ctl00" method="post" action="userAction" id="register_form">
          <%--				当提交表单之后，会将数据发送给userAction对应Controller中的register方法--%>
            <input type="hidden" name="method" value="register"/>
            <h2>
              以下均为必填项
            </h2>
            <table class="tab_login" >
              <tr>
                <td valign="top" class="w1">
                  请填写您的Email地址：
                </td>
                <td>
                  <input name="user.email" type="text" id="email" class="text_input" />
                  <div class="text_left" id="emailValidMsg">
                    <p>
                      请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件。
                    </p>
                    <p>
                      <label for="email" style="color:red" class="error"></label>
                    </p>


                  </div>

                </td>
              </tr>
              <tr>
                <td valign="top" class="w1">
                  设置您在当当网的昵称：
                </td>
                <td>
                  <input name="user.nickname" type="text" id="nickName" class="text_input" />
                  <div class="text_left" id="nickNameValidMsg">
                    <p>
                      您的昵称可以由小写英文字母、中文、数字组成，
                    </p>
                    <p>
                      长度4－20个字符，一个汉字为两个字符。
                    </p>
                    <p>
                      <label for="nickName" style="color:red" class="error"></label>
                    </p>

                  </div>
                </td>
              </tr>
              <tr>
                <td valign="top" class="w1">
                  设置密码：
                </td>
                <td>
                  <input name="user.password" type="password" id="password"
                    class="text_input" />
                  <div class="text_left" id="passwordValidMsg">
                    <p>
                      您的密码可以由大小写英文字母、数字组成，长度6－20位。
                    </p>
                    <label for="password" style="color:red" class="error"></label>
                  </div>
                </td>
              </tr>
              <tr>
                <td valign="top" class="w1">
                  再次输入您设置的密码：
                </td>
                <td>
                  <input name="password1" type="password" id="txtRepeatPass"
                    class="text_input"/>
                  <div class="text_left" id="repeatPassValidMsg">
                    <label for="txtRepeatPass" style="color:red" class="error"></label>
                  </div>
                </td>
              </tr>
              <tr>
                <td valign="top" class="w1">
                  验证码：
                </td>
                <td>
                  <img class="yzm_img" id='imgVcode' src="userAction?method=loadImageCode" />
                  <input name="number" type="text" id="txtVerifyCode"
                    class="yzm_input"/>
                  <div class="text_left t1">
                    <p class="t1">
                    <span id="vcodeValidMsg">请输入图片中的四个字母。</span>

                    <label for="txtVerifyCode" style="color:red" class="error"></label>
                    <a href="javascript:;" id="change" >看不清楚？换个图片</a>
                    </p>
                    </div>
                    </td>
                    </tr>
                    </table>

                    <div class="login_in">

                    <input id="btnClientRegister" class="button_1" name="submit" onclick="return confirm('确认要注册吗？')" type="submit" value="注 册"/>
                    <p id="regist.info" style="color:red"></p>
                    </div>
                    </form>
                    </div>
                    <%@include file="../common/foot1.jsp"%>
                    </body>
                    </html>

4.2 验证js文件

$(document).ready(function(){

  $("#change").click(function (){
    $("#imgVcode").attr('src',"userAction?method=loadImageCode&a="+new Date().getTime());
  });
  $("#register_form").validate({
    errorClass: "error",
    rules:{
      "user.nickname":{
        required:true,
        rangelength: [4,20]
      },
      "user.email":{
        required:true,
        email:true,
        remote:{
          type:"GET",
          url:"userAction?method=checkEmail",
          data:{
            "email":function (){
              return $("#email").val();
            }
          }
        }

      },
      "user.password":{
        required:true,
        rangelength:[6,20]
      },
      "password1":{
        required:true,
        equalTo:"#password"
      },
      "number":{
        required:true,
        remote:{
          type: "GET",
          url: "userAction?method=checkCode",
          data:{
            number: function (){
              return $("#txtVerifyCode").val()
            }
          }
        }
      }
    },
    messages:{
      "user.email":{
        required:"请输入邮箱",
        email:"E-Mail格式不正确",
        remote: "邮箱已经被注册"
      },
      "user.nickname": {
        required:"请输入昵称",
        rangelength:"请输入4-20位字符作为昵称"
      },
      "user.password":{
        required:"请输入密码",
        rangelength:"密码必须是6-20位字符"
      },
      "password1":{
        required:"请确认密码",
        equalTo: "两次输入的密码不一致"
      },
      "number": {
        required:"请输入验证码",
        remote: "验证码不正确"
      }


    }
  });
})

4.3 后台处理验证的controller

/**
* 检查邮箱是否可以使用
* @param request
* @param response
*/
public void checkEmail(HttpServletRequest request,HttpServletResponse response){
    try {
        PrintWriter pw = response.getWriter();
        String email = request.getParameter("email");

        UserService service = new UserServiceImpl();
        boolean result = service.getUserByEmail(email);
        pw.println(result);
    } catch (IOException e) {
        e.printStackTrace();
    }


}

/**
* 产生验证码
* @param request
* @param response
* @throws IOException
*/
public void loadImageCode(HttpServletRequest request,HttpServletResponse response) throws IOException {
    ImageCode ic = new ImageCode();
    BufferedImage image = ic.getImage();
    String text = ic.getText();
    request.getSession().setAttribute("imageCode",text);
    ImageCode.output(image,response.getOutputStream());
}

/**
* 异步，检查验证码是否输入正确
* @param request
* @param response
* @throws IOException
*/
public void checkCode(HttpServletRequest request ,HttpServletResponse response) throws IOException {
    PrintWriter pw = response.getWriter();
    String number = request.getParameter("number");
    String code = (String)request.getSession().getAttribute("imageCode");
    boolean result = number.equalsIgnoreCase(code);
    pw.println(result);

}