一、表单验证的好处
在做网站开发时，我们经常要对用户输入的内容进行约束，数据保存到服务器之前，通常要对数据格式进行检查，比如，电话号码、邮箱格式是否正确、用户名是否唯一等等。而在服务端做这种数据验证会大大加大服务器的负载，造成服务器的压力。因此我们通常会将数据验证放在客户端。客户端做表单验证的优点有以下两点：
- 减轻服务器的压力。
- 保证输入的数据符合要求。
二、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); }
4.4 运行效果
