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>