码迷,mamicode.com
首页 > Web开发 > 详细

ajax实现验证用户名是否已经存在(struts2)

时间:2015-05-11 14:49:58      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:ajax   struts2   用户名验证   

在用户进行注册的时候,为了保证用户名的唯一性,需要在用户注册时进行用户名的验证,这个使用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="" />

ajax实现验证用户名是否已经存在(struts2)

标签:ajax   struts2   用户名验证   

原文地址:http://blog.csdn.net/u013147600/article/details/45643493

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!