前一阵子做了一个购物商城系统,现在把其中的注册功能总结一下.
1.使用工具:
eclipse/Tomcat/Mysql
2.需求分析:
在注册过程中,我们会给定相应的校验规则,防止用户进行非法注册.并且在用户注册过程中出现输入错误的时候,给出相应的警告和提示.目的就是在保证数据合法的情况下,给用户以最好的使用体验.
3.代码部分:
1.页面部分:
这里使用了Bootstrap,Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架,学习成本很低,简单试一试就可以直接上手使用.这里使用了其中的表单部分的一些样式,看起来上档次一点.当然需要导入bootstrap和js文件.
<body>
<br><br><br><br><br>
<div class="col-sm-offset-2 col-sm-10" style="left:145px;">
<button type="reset" id="back" class="btn btn-default" >返回</button>
</div>
<div id="all">
<br><br><br>
<form id="form" class="col-sm-12 " action="UserServlet">
<input type="hidden" name="method" value="add">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label user" >用户名</label>
<div class="col-sm-10">
<input type="text" name="username" class="form-control" id="id1" placeholder="请输入用户名"><span id="msg1"></span>
</div>
</div>
<br><br>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label id4_">真实姓名</label>
<div class="col-sm-10">
<input type="text" name="realname" class="form-control" id="id4" placeholder="请输入真实姓名">
</div>
</div>
<br><br>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label id2_">密码</label>
<div class="col-sm-10">
<input type="password" name="password" class="form-control" id="id2" placeholder="请输入密码"><span id="msg2">
</div>
</div>
<br><br>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label id3_">确认密码</label>
<div class="col-sm-10">
<input type="password" name="conf_pwd" class="form-control" id="id3" placeholder="请确认密码"><span id="msg3">
</div>
</div>
<br><br>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" id="sub" class="btn btn-default" value="注册">
<button type="reset" class="btn btn-default">重置</button>
</div>
</div>
</form>
</div>
</body>css样式
<style type="text/css">
.user{
position:relative;
}
#all{
margin:0 auto;
background:white;
height:350px;
width:600px;
}
body{
background:#eee;
}
</style>js部分
这应该是最重要的部分了,包括了最重要的校验功能,以及一点点动画效果,相应的功能部分都给出了相应的详细注释.
只看用户名的部分就很足够了
<script type="text/javascript">
$(function(){
var a = "";
var b = "";
var c = "";
//加了一个jquery的动画效果.
$("#id1").blur(function(){
$(".user").animate(
{bottom: '-3px'}, 500
);
//用户名为空警告,并且以红色的字体显示出来
if($('#id1').val()==""){
$("#msg1").text("请输入用户名");
$("#msg1").css({"color":"red"});
}else{
//如果内容不为空,进行ajax异步校验
$.ajax({
url:"AjaxServlet",
type:"post",
//这是需要验证的用户输入的用户名
data:{username:$("#id1").val()
},
dataType:"json",
//接收到后台发送来的消息
success:function(msg){
//将后台发来的消息展示在相应的区域,进行相应的判断,合法?绿色:红色
//在这里,如果用户所输入的内容符合相应的校验规则,后台会向前台发送"合法",反之,给出相应的提示.
$("#msg1").text(msg.msg);
if("合法" == msg.msg){
$("#msg1").css({"color":"green"});
}
else{
$("#msg1").css({"color":"red"});
}
//将后台发来的"合法"保存到a,到最后最相应的判断,只有当用户名/密码/确认密码/同时合法才能让注册
a = msg.msg;
},
});
}
});
//校验密码,和用户名一样的思路和办法
$("#id2").blur(function(){
$(".id2_").animate(
{bottom: '-3px'}, 500
);
if($('#id2').val()==""){
$("#msg2").text("请输入密码");
$("#msg2").css({"color":"red"});
}else{
$.ajax({
url:"AjaxServlet",
type:"post",
data:{pwd:$("#id2").val()
},
dataType:"json",
success:function(msg){
$("#msg2").text(msg.pwd_msg);
if("合法" == msg.pwd_msg){
$("#msg2").css({"color":"green"});
}
else{
$("#msg2").css({"color":"red"});
}
//和之前的用户名一样,将信息保存在b中
b = msg.pwd_msg;
},
});
}
});
//确认密码
$("#id3").blur(function(){
$(".id3_").animate(
{bottom: '-3px'}, 500
);
if($('#id3').val()==""){
$("#msg3").text("请确认密码");
$("#msg3").css({"color":"red"});
}else{
$.ajax({
url:"AjaxServlet",
type:"post",
data:{conf_pwd:$("#id3").val(),pwd:$("#id2").val()
},
dataType:"json",
success:function(msg){
$("#msg3").text(msg.conf_msg);
if("与之前输入的密码一致" == msg.conf_msg){
$("#msg3").css({"color":"green"});
}
else{
$("#msg3").css({"color":"red"});
}
c = msg.conf_msg;
},
});
}
});
//当用户点击"注册"按钮时,给出相应的判断,只有当if里卖的语句都满足时,才让他提交表单.
//在这里需要注意:要将"注册"按钮的type改为"button",不能为"submit",要不直接点击就会提交表单
$("#sub").click(function(){
if(a=="合法" && b=="合法" && c=="与之前输入的密码一致"){
//调用submit()方法,实现表单的提交
$("#form").submit();
}
});
//下面的部分是:当用户将鼠标定位到相应的表单部分时,清空该部分的提示信息,并实现相应的动画效果.
$("#id1").focus(function(){
$("#msg1").text("");
$(".user").animate(
{bottom: '+10px'}, "500"
);
});
$("#id2").focus(function(){
$("#msg2").text("");
$(".id2_").animate(
{bottom: '+10px'}, "500"
);
});
$("#id3").focus(function(){
$("#msg3").text("");
$(".id3_").animate(
{bottom: '+10px'}, "500"
);
});
$("#id4").focus(function(){
$("#msg4").text("");
$(".id4_").animate(
{bottom: '+10px'}, "500"
);
});
$("#id4").blur(function(){
$(".id4_").animate(
{bottom: '-2px'}, "500"
);
});
//一个返回按钮,返回上一页面
$("#back").click(function(){
javascript:history.go(-1)
});
});
</script>后台部分(servlet)
关键的部分都给出了注释,仔细看!
package com.hello.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.hello.util.CreateConnection;
import net.sf.json.JSONObject;
public class AjaxServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//因为我的数类型是json,所以需要用到一个jar包-->json-lib-2.2.3-jdk15.jar,导入并拿到它的对象就好.
JSONObject j = new JSONObject();
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
// 接收发过来的user数据
String username = request.getParameter("username");
String pwd = request.getParameter("pwd");
String conf_pwd = request.getParameter("conf_pwd");
// 判断 用户名的正则表达式,用以验证用户名是否合法
String name_reg = "^[\\u4e00-\\u9fa5_a-zA-Z0-9-]{1,16}$";
boolean flag = true;
if (username != "" && username != null) {
Connection conn = CreateConnection.getConnection();
try {
//向数据库查找相应的数据
String sql = "select username from t_user";
Statement sta = conn.createStatement();
ResultSet set = sta.executeQuery(sql);
while (set.next()) {
//判断数据库中是否有用户输入的用户名?提示已注册:继续判断后面的部分
if(username.equals(set.getString("username"))){
flag=false;
//像前台发送"该用户名已被注册"的信息.
j.put("msg", "该用户名已被注册");
out.write(j.toString());
//到此,停止循环,因为已经出现了非法信息
break;
}
}
//根据上面的判断,如果flag为true,表明该用户名未被注册,接着判断用户输入的用户名是否符合相应的正则
if(flag){
// 符合规则,传"合法",向页面传送数据
if (username.matches(name_reg)) {
j.put("msg", "合法");
out.write(j.toString());
} else {
//不合法,提出相应的提示
j.put("msg", "限16位,字母数字下划线");
out.write(j.toString());
}
}
} catch (SQLException e) {
e.printStackTrace();
}
}
// 判断密码
String pwd_reg = "^[\\u4e00-\\u9fa5_a-zA-Z0-9-]{1,16}$";
if (pwd != "" && pwd != null && conf_pwd == null) {
if (pwd.matches(pwd_reg)) {
j.put("pwd_msg", "合法");
out.write(j.toString());
} else {
j.put("pwd_msg", "限16位,字母数字下划线");
out.write(j.toString());
}
}
//判断 确认密码是否与密码相同
//只有当用户输入了密码和确认密码的情况下,才进行判断
if (conf_pwd != "" && conf_pwd != null) {
if (conf_pwd.equals(pwd)) {
j.put("conf_msg", "与之前输入的密码一致");
out.write(j.toString());
} else {
j.put("conf_msg", "与之前输入的密码不一致");
out.write(j.toString());
}
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
写在最后:
其实ajax校验传送一次数据就可以达到效果,但是我想实现的是:用户每一次输入完毕都知道自己刚刚输入的信息是否合法,而不是都输入完毕之后,点击注册,才给出相应的提示.所以我都是用的blur方法就会开启ajax校验,并实时显示是否合法.至少以我现在的能力,这就是我的办法,最后是实现的还不错,很满意!
而之后的登录的功能就没有这么麻烦了,只需要一次传输就好,不用每一步输入完毕都显示信息,如果有不合法的信息,只是最后用户点击登录按钮的时候才会给出相应提示.
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
