在用户进行注册的时候,为了保证用户名的唯一性,需要在用户注册时进行用户名的验证,这个使用AJAX实现无刷新验证是最合适的。
下面就是我的验证源码,在代码中通过注释讲解用法。
1.jsp页面:
<table> <tr> <td>账号</td> <td><input name="accountNumber" type="text" id="uname" /> <div id="showResult"></div> </td> </tr> </table>
2.js代码(Ajax代码):
这里用的是Jquery的ready方法,在页面完全加载后会调用ready方法,注意ready方法不应该和与<body onload=""> 一起使用。
<script type="text/javascript"> $(document).ready(function(){ var inputUserNameObj = $("#uname"); //将获取ID为uname的控件的对象 $("#uname").blur(function(){ //当该控件失去焦点时发生 var text = inputUserNameObj.val(); //获得用户输入的用户名 $.post("member_CheckAccounterNumber.action?accounterNumber="+text,null,function(response){ //以POST方式跳转到action里面的方法中进行处理,并返回处理结果response if(response=="用户名已经存在"){ //根据返回值进行处理 document.getElementById("uname").focus();//用户名输入控件获得焦点 document.getElementById("showResult").innerHTML="<font color='red'>"+response+"</font>"; //在div中提示用户该用户名已经存在 }else{ if(document.getElementById("uname").value=="") //判断用户名是否为空 { document.getElementById("showResult").innerHTML="<font color='red'>"+"用户名不为空"+"</font>"; //在div中提示用户该用户名不能为空 document.getElementById("uname").focus();//用户名输入控件获得焦点 }else{ document.getElementById("showResult").innerHTML="<font color='blue'>"+response+"</font>"; //在div中提示用户该用户名可用 } } }); }); }); </script>
3.action中的代码:
//Ajax验证用户名,防止重復 private String accounterNumber; public String getAccounterNumber() { return accounterNumber; } public void setAccounterNumber(String accounterNumber) { this.accounterNumber = accounterNumber; } public void CheckAccounterNumber() { //查找該用戶名是否存在 mUserRole=userbiz.queryMemberUserInfobyAccountName(accounterNumber); //設置响应编码UTF-8,防止中文乱码 res.setContentType("text/html;charset=UTF-8"); if(mUserRole!=null)//判断是否存在 { try { res.getWriter().write("用户名已经存在"); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } else { try { res.getWriter().write("此用户名可用"); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } } }
效果图片:<img src="http://img.blog.csdn.net/20150511141835085?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzE0NzYwMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20150511141903727?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzE0NzYwMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20150511141929202?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzE0NzYwMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
时间: 2024-10-29 10:46:24