异步实现用户名的校验

1.异步校验用户名是否存在

实验目的：用户在注册时不再全部填完信息后再以窗口的形式弹出用户名存在，而是实现填完姓名后就可以判断是否存在。

解决方案：

①首先使用的bootstrap样式，在表单名字的div下在创建一个用来显示信息的div，里面加入一个span样式

②设置文本域的blur事件，获取填入的用户名信息，并且传输到后台进行校验，之后以字符串的形式传递回来

③根据返还的值，加入相应的label标签，根据他的flag值来设置label的属性和注册按钮的属性（disabled），最后将输出的信息显示在标签内容里

相关的前台样式：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.js"></script>
<title>注册用户</title>
<style>
.f{
    font-size:15px;
    font-family:"楷体";
}
</style>
<script type="text/javascript">
$(function(){
    $("input[name='name']").blur(function(){
        var url="namecheck";
        var params={"name":$(this).val()};
        $.post(url,params,function(data){
            $("#showUserNameSpan").addClass("label");
            if(data.flag){
                $("#showUserNameSpan").addClass("label-success");
                $("#showUserNameSpan").removeClass("label-danger");
                $("#registerButton").removeProp("disabled");
            }else{
                $("#showUserNameSpan").removeClass("label-success");
                $("#showUserNameSpan").addClass("label-danger");
                $("#registerButton").prop("disabled","disabled");
            }
            $("#showUserNameSpan").text(data.message);
            $("#showUserNameSpan").addClass("f");
        },"json");
    });
});
function check(form)
{
    var name=form.name.value;
    var password=form.password.value;
    var rpassword=form.rpassword.value;
    var tel=form.tel.value;
    var danwei=form.danwei.value;
    var s=/^1[8,3,5,6]{1}[0-9]{9}$/;
    if(name==""||password==""||rpassword==""||tel==""||danwei=="")
    {
        alert("请将内容填写完整！");
        return false;
    }
    if(password!=rpassword)
    {
        alert("两次输入密码不一致！");
        form.rpassword.focus();
        form.rpassword="";
        return false;
    }
    if(!tel.match(s))
    {
        alert("请按照手机号码格式输入");
        form.tel.focus();
        return false;
    }
}
</script>
</head>
<body>
    <%
        Object message = request.getAttribute("message");
        if (message != null && !"".equals(message)) {
    %>
    <script type="text/javascript">
               alert("<%=request.getAttribute("message")%>");
    </script>
    <%
        }
    %>
<div align="center">
    <h1>注册用户</h1>
</div>
<div align="center">
<form class="form-horizontal" role="form" name="form1" action="register_do" method="post" onsubmit="return check(form1)">
  <div class="form-group">
    <label for="name" class="col-sm-5 control-label">姓名</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" name="name" id="name" placeholder="请输入名字">
    </div>
    <div class="col-sm-1" style="textsize="15px">
        <span id="showUserNameSpan"></span>
    </div>
  </div>
  <div class="form-group">
    <label for="password" class="col-sm-5 control-label">密码</label>
    <div class="col-sm-2">
      <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
    </div>
  </div>
  <div class="form-group">
    <label for="rpassword" class="col-sm-5 control-label">重复密码</label>
    <div class="col-sm-2">
      <input type="password" class="form-control" name="rpassword" id="rpassword" placeholder="请输入密码">
    </div>
  </div>
  <div class="form-group">
    <label for="tel" class="col-sm-5 control-label">手机号码</label>
    <div class="col-sm-2">
      <input type="tel" class="form-control" name="tel" id="tel" placeholder="请输入手机号码">
    </div>
  </div>
  <div class="form-group">
    <label for="danwei" class="col-sm-5 control-label">所属单位</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" name="danwei" id="danwei" placeholder="请输入所属单位">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-8">
      <button type="submit" class="btn btn-primary" id="registerButton" disabled="disabled">注册</button>
      <button type="reset" class="btn btn-warning">重置</button>
    </div>
  </div>
</form>
</div>
</body>
</html>

View Code

servlet：namecheck

package servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import Bean.User;
import Dao.userdao;
import net.sf.json.JSONObject;

/**
 * Servlet implementation class namecheck
 */
@WebServlet("/namecheck")
public class namecheck extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public namecheck() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        String name=request.getParameter("name");
        User bean=new User();
        bean.setName(name);
        userdao dao=new userdao();
        JSONObject json=new JSONObject();
        if(dao.isExist(bean)) {
            json.put("message", name+"用户名不可用");
            json.put("flag",false);
            response.getWriter().print(json.toString());
        }else {
            json.put("message", name+"用户名可用");
            json.put("flag",true);
            response.getWriter().print(json.toString());
        }
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

View Code

Dao层：isExist()

public boolean isExist(User bean)
    {
        String sql="select * from users where name='"+bean.getName()+"'";
        Connection con=null;
        Statement state=null;
        ResultSet rs=null;
        con=DBUtil.getConn();
        boolean flag=false;
        try {
            state=con.createStatement();
            rs=state.executeQuery(sql);
            while(rs.next())
            {
                flag=true;
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        DBUtil.close(rs, state, con);
        return flag;
    }

View Code

功能实现截图：

总结知识：在该功能的实现上用到了：

ajax异步访问，

JSONObject的格式，

jQuery 操作 CSS

学习了下面这些：

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
css() - 设置或返回样式属性
prop("规定属性的名称","规定属性的值")
removeProp("规定要移除的属性的名称")
css("propertyname","value");添加选定的css样式

异步实现用户名的校验

jQuery 操作 CSS

猜你喜欢