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="" />
时间: 2024-10-29 10:46:24

ajax实现验证用户名是否已经存在(struts2)的相关文章

Ajax注册验证用户名是否存在 ——引自百度经验

Ajax注册验证用户名是否存在 http://jingyan.baidu.com/article/a948d6515fdf870a2dcd2e85.html

ajax异步验证用户名是否存在

jsp代码//验证用户名是否存在 function userNum(inputname) { $.ajax({ url:"findByName.action", type:"POST", data:"userRegisterInfo.username=" + inputname, dataType:"json", success:function(data) { if(data.status == 1) { $("#

php ajax 同时验证 用户名 密码

今天写了一个程序分享给大家,该程序是ajax密码和用户名验证问题 第一步 先在数据库里建立一张表 有3个字段 为 id name pass 第二步 写html页面,需要引入jq库 请到官网自行下载 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html

ajax异步验证用户名密码,提示路径错误

使用thinkphp框架异步验证用户名和密码的时候,ajax路径错误可能有多重情况.我遇到的是,我自感路径没问题,且先前使用无错.由于多人合作使用svn,所以在更新代码后,使用firebug显示一直是路径错误.这是和数据库有关,没连接数据库.我的搭档把端口号配置了,改了大家常用的mysql3306的端口号.自己改回即可.

Struts2 Ajax Jquery 验证用户名

JS: <script type="text/javascript" src="<%=basePath%>js/jquery.js"></script> <script type="text/javascript"> $(document).ready( function(){ $("#uname").blur( //添加文本框失去焦点事件 function(){ var una

JSP---网上商城-&gt;使用Ajax技术验证用户名是否已存在

js代码: 1 <script language="javascript"> 2 var req; 3 function createReq() { 4 if (window.XMLHttpRequest) { 5 req = new XMLHttpRequest(); 6 } else if (window.ActiveXObject) { 7 req = new ActiveXObject("Microsoft.XMLHTTP"); 8 } 9 }

ajax的学习和运用ajax来验证用户名是否存在的例子

ajax执行的过程: 首先是由JS页面发送一个请求,并且传送一个data数据过去, 交给处理页面来对数据库进行处理,处理完了就返回一个值当作success 方法里面的参数来执行success里面的回调函数. ajax.chuli.web.php后台对数据库处理页面

Struts2+Jquery+实现Ajax无刷新验证用户名是否存在

小弟之前一直搞不明白Struts2+Jquery+实现Ajax无刷新验证用户名该怎么弄,后来经过努力,终于搞定了,应注意struts配置文件的内容,好了直接上代码了 页面代码 <body> <s:form action="registAction" method="post" namespace="/user"> <table> <tr> <td>UserName</td>

ajax验证用户名和密码

1 var user = form.name.value; 2 var password = form.password.value; 3 var url = "chkname.php?user="+user+"&password="+password;//以前只知道ajax用于对用户名的检测,原来还可以对密码进行检测. 4 xmlhttp.open("GET",url,true); 5 xmlhttp.onreadystatechang