我们知道，用户在注册的时候，会有个表单页面，然后有些选项是必填的，有些要填的内容是有规范的，这些都要在用户提交之前进行验证才行，如果不符合要求，需要在右边显示一个友好的提示，让用户修改。
记得以前在学习Servlet的时候，实现一个简单的用户注册功能的验证是在后台做的，有些用了正则表达式，有些没用，但是都比较简单。流程是这样的，前台提交表单数据后，servlet获取数据先进行验证，如果不符合要求，将提示信息放到一个List中，然后再把List存到session中，跳转到一个新的页面做回显，把错误信息也显示出来，但是比较繁琐。
前面做网上商城项目的时候，用EasyUI做后台商品添加时，也做了验证的功能，EasyUI自带了验证的功能，还是很强大的，效果也不错。感兴趣的话不妨来看一下这篇文章。
但是前台用户注册的页面我们该如何做呢？这就是本文所要介绍的主要内容了，我们可以使用jQuery的Validate插件来做注册的验证功能，jQuery我也没有系统的学习，只是用到什么学什么，用到什么了解什么，所以如有错误之处，欢迎留言指正~下面我一步步通过代码详细介绍一下jQuery-Validate验证插件的使用步骤。
2. 效果展示
首先来看一下最后实现的效果，先有个直观的感受，个人感觉还算可以的~能接受。
从图中可以看出，包括输入前的提示，输入正确和错误的提示的功能，都已经完成。再看一下我的工程：
总共有6个jsp文件，之所以写成6个是为了一步步解说做这个效果的步骤，最后terminal.jsp是最终版的。运行的时候也只需要运行这个terminal.jsp即可。 下面我详细分析一下使用jQurey-Validate验证插件的过程。
3. Validate环境的搭建
环境搭建，肯定少不了jar包，我使用的是jQuery-validate-1.15，官方上给出了依赖的几个版本的jQuery，我下了jQuery-1.11.1。所以将这两个js文件放到工程中WebRoot/js中，并在jsp页面中导入即可。
demo1.jsp很简单，为了搭建环境而已，如果点击提交，不会跳转到指定页面表示环境搭建成功。
4. Validate基本方法的使用
好了，环境搭建成功了，接下来我们开始使用Validate的基本方法了，这里还要导入一个js文件：additional-methods.js，新版本的jQuery-validate-1.15中没有对文件后缀的验证，后来我在官网上查了一下，官网上说放到additional-methods.js中了，所以我去下了个，放到工程中了，而且方法名也和老版本不太一样，下面再说。看一下demo2.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jquery validate验证</title> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.11.1.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery.validate.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/additional-methods.js"></script> <script type="text/javascript"> $(function(){ //让当前表单调用validate方法，实现表单验证功能 $("#ff").validate({ debug:true, //调试模式，即使验证成功也不会跳转到目标页面 rules:{ //配置验证规则，key就是被验证的dom对象，value就是调用验证的方法(也是json格式) sname:{ required:true, //必填。如果验证方法不需要参数，则配置为true rangelength:[6,12] }, spass:{ required:true, rangelength:[6,12] }, spass2:{ required:true, equalTo:'#spass' //表示和id="spass"的值相同 }, slike:{ required:true, }, semail:{ required:true, email:true }, simage:{ required:true, extension:'gif|jpe?g|png' } } }); }); </script> </head> <body> <!-- <ul> <li>演示基本方法的使用</li> <li>jquery.validate.js中260行有缺省的验证配置</li> <li>jquery.validate.js中354行有验证方法出错的消息，即告诉我们都有哪些验证方法</li> </ul> --> <form action="http://www.hao123.com" method="post"> 姓名：<input type="text" /><br/> 密码：<input type="password"/><br/> 确认密码：<input type="password" /><br/> 爱好： 上网：<input type="checkbox" value="上网"/> 唱歌：<input type="checkbox" value="唱歌"/> 编程：<input type="checkbox" value="编程"/> 书法：<input type="checkbox" value="书法"/><br/> 邮箱：<input type="text" /><br/> 头像：<input type="file" /><br/> <input type="submit" value="提交"> </form> </body> </html>