这款插件非常好用！
首先导入插件：
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
注册页面：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html><html><head></head><meta name="viewport" content="width=device-width, initial-scale=1"><title>会员注册</title><link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" /><script src="js/jquery-1.11.3.min.js" type="text/javascript"></script><script src="js/bootstrap.min.js" type="text/javascript"></script><!-- 引入自定义css文件 style.css --><link rel="stylesheet" href="css/style.css" type="text/css" /><script src="js/jquery.validate.min.js" type="text/javascript"></script><script type="text/javascript">//表单验证$(function() {$("#regForm").validate({rules : {"username" : {"required" : true,"checkUsername":"ckuname验证"},"password" : {"required" : true,"rangelength" : [ 6, 12 ]},"confirmpwd" : {"required" : true,"rangelength" : [ 6, 12 ],"equalTo" : "#password"},"email" : {"required" : true,"email" : true},"telephone" : {"required" : true},"name" : {"required" : true},"birthday" : {"required" : true,"date" : true},"sex" : {"required" : true}},messages : {"username" : {"required" : "用户名不能为空","checkUsername":"用户名重复了"},"password" : {"required" : "密码不能为空","rangelength" : "密码长度在6-12位"},"confirmpwd" : {"required" : "确认密码不能为空","rangelength" : "确认密码长度在6-12位","equalTo" : "两次密码不一致"},"email" : {"required" : "邮箱不能为空","email" : "邮箱格式不正确"},"telephone" : {"required" : "电话不能为空"},"name" : {"required" : "真实姓名不能为空"},"birthday" : {"required" : "生日不能为空","date" : "日期格式不正确"},"sex" : {"required" : "性别必须选择"}},errorPlacement : function(error, element) {console.log(error);console.log(element);if (element.is(":radio") || element.is(":checkbox")) {//如果出错的是单选按钮或者多选按钮，则将错误信息添加到当前元素的父容器所在的容器的最后error.appendTo(element.parent().parent());} else {//如果不不是单选按钮和复选按钮,直接将错误信息显示在当前元素的后面error.insertAfter(element);}}});//给validate插件添加一个验证的方法(添加一个验证的规则)$.validator.addMethod("checkUsername",//自定义校验规则的名称function(value,element,params){//自定义校验规则的实现console.log(params);//value)表单元素值//element)校验的元素对象//params)校验规则输入的参数var flag = true;//发送一个Ajax，到服务器进行验证用户存在$.ajax({"async":false,//同步操作"url":"${pageContext.request.contextPath}/checkUsername","type":"POST","data":{"username":value},"dataType":"json","success":function(data){flag = data.isExist;//true--存在 false--不存在}});//需要返回值 false----该校验器校验失败 true---校验通过return !flag;});});</script><style>body {margin-top: 20px;margin: 0 auto;}.carousel-inner .item img {width: 100%;height: 300px;}font {color: #3164af;font-size: 18px;font-weight: normal;padding: 0 10px;}.error{color:red;}</style></head><body><!-- 引入header.jsp --><jsp:include page="/header.jsp"></jsp:include><div class="container"style="width: 100%; background: url('image/regist_bg.jpg');"><div class="row"><div class="col-md-2"></div><div class="col-md-8"style="background: #fff; padding: 40px 80px; margin: 30px; border: 7px solid #ccc;"><font>会员注册</font>USER REGISTER<form id="regForm" action="reg" class="form-horizontal"style="margin-top: 5px;"><div class="form-group"><label for="username" class="col-sm-2 control-label">用户名</label><div class="col-sm-6"><input type="text" class="form-control" name="username"id="username" placeholder="请输入用户名"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">密码</label><div class="col-sm-6"><input type="password" class="form-control" name="password"id="password" placeholder="请输入密码"></div></div><div class="form-group"><label for="confirmpwd" class="col-sm-2 control-label">确认密码</label><div class="col-sm-6"><input type="password" class="form-control" name="confirmpwd" id="confirmpwd"placeholder="请输入确认密码"></div></div><div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">Email</label><div class="col-sm-6"><input type="email" class="form-control" name="email"id="inputEmail3" placeholder="Email"></div></div><div class="form-group"><label for="usercaption" class="col-sm-2 control-label">姓名</label><div class="col-sm-6"><input type="text" name="name" class="form-control"id="usercaption" placeholder="请输入姓名"></div></div><div class="form-group opt"><label for="inlineRadio1" class="col-sm-2 control-label">性别</label><div class="col-sm-6"><label class="radio-inline"> <input type="radio"name="sex" id="inlineRadio1" value="男"> 男</label> <label class="radio-inline"> <input type="radio"name="sex" id="inlineRadio2" value="女"> 女</label></div></div><div class="form-group"><label for="date" class="col-sm-2 control-label">出生日期</label><div class="col-sm-6"><input type="date" name="birthday" class="form-control"></div></div><div class="form-group"><label for="date" class="col-sm-2 control-label">验证码</label><div class="col-sm-3"><input type="text" class="form-control"></div><div class="col-sm-2"><img src="./image/captcha.jhtml" /></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><input type="submit" width="100" value="注册" name="submit"style="background: url('./images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 35px; width: 100px; color: white;"></div></div></form></div><div class="col-md-2"></div></div></div><!-- 引入footer.jsp --><jsp:include page="/footer.jsp"></jsp:include></body></html>
需要注意的地方：
这里红框标注的是使用的是id名，并不是name ;如碰到两次密码一致时找一下这里有没有错误；
