异步实现用户名的校验
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>
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); } }
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; }
功能实现截图：
总结知识：在该功能的实现上用到了：
ajax异步访问，
JSONObject的格式，
jQuery 操作 CSS
学习了下面这些：
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- css() - 设置或返回样式属性
- prop("规定属性的名称","规定属性的值")
- removeProp("规定要移除的属性的名称")
- css("propertyname","value");添加选定的css样式
