前言：
目前姐妹们对“jqueryvalidate”大概比较关注，小伙伴们都需要剖析一些“jqueryvalidate”的相关知识。那么小编同时在网上网罗了一些有关“jqueryvalidate””的相关文章，希望小伙伴们能喜欢，我们一起来学习一下吧！想了解更多Java相关内容，私信“Java”，还可领取Java资料~
知识点学的再多，也不如一次实战的经验
从今天开始咱们玩点不一样的，写一个小的项目案例。相信很多小伙伴都有这样的感觉：
看别人的代码行云流水，自己动手的时候无从下手。今天我们就一起动手从零来写一个小项目吧！
那我们直接开始吧~
首先来搭一下环境
（把我们需要的工具类和第三方jar包放进去）
下面就开始动手写代码了
用户注册功能
先来创建数据库表
然后是JavaBean
接下来是逻辑代码
RegisterServlet获取前端页面传过来的数据，并把UUID封装进来
下面就不一样了
RegisterServlet 把数据传到 Service 层，Service 层调用 DAO 层，DAO 层操作数据库（完成数据的插入操作），把结果向上一层一层反馈~然后RegisterSerevle t根据返回的结果进行判断，成功就跳转到成功的页面，失败就跳转到失败的页面~
测试一下
用户注册成功~
下面我们来给页面添加一个
表单验证
我们上次用的是 js 写的表单验证这次我们用一个 validate 插件来做表单验证
首先引入文件
编写页面代码
截图的效果不好咱们直接上页面的源码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<!-- 引入表单校验插件 -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<style type="text/css">
.error{
color:red
}
</style>
<script type="text/javascript">
$(function(){
$("#myform").validate({
rules:{
"username":{
"required":true
},
"password" : {
"required" : true,
"rangelength" : [ 6, 12 ]
},
"rpassword" : {
"required" : true,
"rangelength" : [ 6, 12 ],
"equalTo" : "#password"
},
"email" : {
"required" : true,
"email" : true
},
"sex" : {
"required" : true
}
},
messages:{
"username":{
"required":"用户名不能为空！"
},
"password" : {
"required" : "密码不能为空",
"rangelength" : "密码长度6-12位"
},
"rpassword" : {
"required" : "密码不能为空",
"rangelength" : "密码长度6-12位",
"equalTo" : "两次密码不一致"
},
"email" : {
"required" : "邮箱不能为空",
"email" : "邮箱格式不正确"
}
}
});
});
</script>
</head>
<body>
<form id="myform" action="${pageContext.request.contextPath}/register"
method="post">
<table border="1px" width="600px" height="400px" align="center"
cellpadding="0px" cellspacing="0px">
<tr height="40px">
<td colspan="2"><font size="4"><b>用户注册 USER
REGISTER</b></font></td>
</tr>
<tr>
<td align="center"><b>用户名</b></td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td align="center"><b>密码</b></td>
<td><input id="password" type="password" name="password" /></td>
</tr>
<tr>
<td align="center"><b>确认密码</b></td>
<td><input type="password" name="rpassword" /></td>
</tr>
<tr>
<td align="center"><b>Email</b></td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td align="center"><b>姓名</b></td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td align="center"><b>性别</b></td>
<td>
<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女
<label class="error" for="sex" style="display:none ">请选择性别！</label>
</td>
</tr>
<tr>
<td align="center"><b>出生日期</b></td>
<td><input type="text" name="birthday" size="30px" /></td>
</tr>
<tr>
<td align="center"><b>验证码</b></td>
<td><input type="text" name="yzm" /> <img src="img/yzm.png"
width="60" height="30" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册" name="submit"/>
<input type="reset" value="重置" /></td>
</tr>
</table>
</form>
</body>
</html>
页面效果：
你学会了吗？
标签： #jqueryvalidate
