`
Longmanfei
  • 浏览: 48115 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

利用ajax检测用户注册时容易忽略的small bug

阅读更多

当我们想实现一个程序——利用邮箱激活账号的注册.

   那么首先我们要做哪些准备呢:

Ø 首先我们要写js判断用户名是否为空或者是不是只有空格,当失去焦点是我们利用ajax去异步查询

看看是否此用户名已经备注测,当然于此同时其它项都不能为空当然重要的就是邮箱必须正确,因为我们是用邮箱激活的嘛

Ø 那么怎样去实现邮箱激活呢,首先当用户名不重复的时候我们要把用户的注册信息插入数据库并且定义默认标识,然后当数据插入成功是我们给用户发送一封简易邮件,在发送这封邮件之前我们要根据用户名去查询这条记录的id然后把id通过连接传递,也可以在插入数据的时候插入随机数(确保这是唯一标识)然后传递唯一标识,当用户收到邮件是点击连接,然后把插入数据的状态改变未激活,这样就可以实现了

Ø 其次就是我要把相应的js和相关的jar包导入

    

那么在写这个检测程序是我们会容易忽略什么bug呢,那就是当我们通过ajax检测到用户名已存在并且其他项都符合js的判断,当我们点击提交时,我们要当然要阻止其提交了,否则数据就重复了,一般人们都容易忽略这一点,当我们看到输入框提示此用户已存在,键入我们不修改直接提交呢?

那么我们应该怎么实现,当失去焦点时判断用户名是否重复,并且点击提交时,判断其他是否符合条件,并且判断用户是否符合要求呢

下面就简单的来实现一下:

首先先来做一个页面并设置其隐藏域当提交请求时进行判断用户名是否重复

 

<!--EndFragment-->

  <head>
		<base href="<%=basePath%>">

		<title>My JSP 'admin_zhuce.jsp' starting page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<script type="text/javascript">
    
    function check(){
      var resg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//判断邮箱
      var na = document.getElementById("sum").value;//获取隐藏域的值
      var name = document.getElementById("name").value;
	  var pass = document.getElementById("pass").value;
      var  flag = true;
        
		if (name.length<=0) {//判断不严谨没有判断空格,可自行实现
		    alert("用户名不能为空,请输入用户名!");
            form1.name.focus();
			flag = false;
		}
        if (pass.length<=0) {
		alert("密码不能为空,请输入密码!");
          form1.pass.focus();
			flag = false;
		}
      if(!resg.test(form1.email.value)){
          alert("邮箱格式不正确,请输入正确的邮箱!");
          form1.email.focus();
          flag=false;
      }if(na==0){
          //如果在提示下没有将用户名修改,则提交失败
          flag=false;
          
      }
      return flag;
    }
</script>
		<script type="text/javascript" language="javascript"
			src="./script/ajax.js"></script>
		<script type="text/javascript">
     
       function checkuser(){
         
         var user=document.getElementById("name").value;
         
         var ajax=initAjax();
	     var url = encodeURI('/Goods/admin_zhuce?user='+user+'&r='+Math.random()+'&esper=login');	//编码请求地址和参数
	
	   
	//异步方式调用
	ajax.open('get', url, true);
	ajax.send(null);
	document.getElementById("spanUser").innerHTML='<img src=./images/wait.gif />';
	//send完后无非直接得到响应,需要注册事件监听readyState属性的值
	//onreadystatechange有5个值:
    // 0:未初始化
    // 1:初始化
    // 2:发送数据
    // 3:接收数据中
    // 4:数据接收完毕
    
	ajax.onreadystatechange = function(){
	    // alert("111");
		//当readyState=4,表示服务器端执行完毕
		if(ajax.readyState == 4 && ajax.status == 200 ){
		
		 //alert(ajax.responseText);
		 
		 //alert(ajax.responseText);
		  if(ajax.responseText){
		      
		        document.getElementById("spanUser").innerHTML='<font color=red >此用户已存在</font>';
		        document.all.sum.value="0";//想隐藏域写值,以便于提交时判断用户名是否在存在提示下进行了修改
		         
		      }
		       else{
		        
		        document.getElementById("spanUser").innerHTML='<font color=red >用户名可以使用</font>';
		        document.all.sum.value="1";
		        }
		       
		
		    }
	     }
       }
     
     </script>
	</head>

	<body>
		<div align="center">
			<form name="form1" method="post"
				action="${public String _elExpression26pageContext.getGetRequest()().getContextPath()}/admin_zhuce?esper=zhuce"
				onsubmit="return check()">
				<table>
					<caption>
						用户注册
					</caption>
					<tr>
						<th>
							用户名:
						</th>
						<th>
							<input type="text" name="name" onblur="checkuser()" />
						</th>
						<th>
							<span id="spanUser"></span>
						</th>
					</tr>
					<tr>
						<th>
							密&nbsp;&nbsp;码:
						</th>
						<th>
							<input type="password" name="pass" />
						</th>
					</tr>
					<tr>
						<th>
							邮&nbsp;&nbsp;箱:
						</th>
						<th>
							<input type="text" name="email" />
						</th>
					</tr>
					<tr>
						<th>
							<input type="submit" value="提交" />
						</th>
						<th>
							<input type="reset" name="重置" />
							<input type="hidden" value="" name="sum" id="sum" />
						</th>

					</tr>
				</table>
			</form>
		</div>
		</body>

 

	然后就是servelt
public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		request.setCharacterEncoding("UTF-8");
		
		// 处理注册信息
		String esper = request.getParameter("esper") == null ? "" : request
				.getParameter("esper");

		if (esper != null && esper.equals("zhuce")) {
			// System.out.println("进来了");
			String name = request.getParameter("name");
			String pass = request.getParameter("pass");
			String email = request.getParameter("email");
			AdminServiceImpl adminServiceImpl = new AdminServiceImpl();
			Admin entity = new Admin(name, pass);
            
			boolean flag = adminServiceImpl.insert(entity);
			if (flag) {

				System.out.println("成功");
				// 根据用户名获取id
				entity=adminServiceImpl.items(name);
				int id=entity.getId();
				//发送邮件
				String subject = "注册激活";
				String body = "点击下面网址激活账号"
						+ "http://192.168.51.24:8080/Goods/admin_zhuce?esper=jh&id="+id;
						
				NewSendMail sm = new NewSendMail();
				sm.sMail("Longmanfei", email, name, subject, body);
				request.getRequestDispatcher("admin/admin_login.jsp").forward(
						request, response);
			} else {
				System.out.println("失败");
			}

		}if(esper != null && esper.equals("jh")){
			String id=request.getParameter("id");
			AdminServiceImpl adminServiceImpl = new AdminServiceImpl();
			boolean flag=adminServiceImpl.update_qx(Integer.valueOf(id));
			if(flag){
				request.getRequestDispatcher("admin/admin_login.jsp").forward(
						request, response);
			}else{
				System.out.println("激活失败");
			}
		
		}  
		
	}


}

 

邮件发送  里面的属性根据自己定义
package cn.csdn.util;


import org.apache.commons.mail.*;
public class NewSendMail { 
	public String id;
	public String to;/* 收信人地址 */ 
	public String toName;//收信人姓名 
	public String subject;/* 主题 */ 
	public String body;
    public boolean sMail(String faname,String to,String toName,String subject,String body){
    	boolean flag=false;
    	HtmlEmail email=new HtmlEmail(); 
    	//System.out.println(faname+to+toName+subject+body);
	  try {  
		
		//System.out.println("发送成功");
       email.setHostName("smtp.163.com");//设置发信的smtp服务器 
       email.addTo(to, toName);//设置收件人帐号和收件人 
	   email.setFrom("Longmanfei@163.com",faname);//设置发信的邮件帐号和发信人 
	   email.setSubject(subject);//设置邮件主题 
	   email.setAuthentication("Longmanfei@163.com",密码);//如果smtp服务器需要认证的话,在这里设置帐号、密码 
	   email.setCharset("utf-8");
	 	   email.setHtmlMsg(body);//设置邮件正文和字符编码 
	   
	   email.send(); 
	   
	   flag=true;
       } catch (EmailException e) { 
    	   //flag=false;
    	   System.out.println("发送失败");
	   e.printStackTrace(); 
	  } return flag;
    }/
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
}	
也许还有更好的方法去进行判断,期待探讨

 

1
3
分享到:
评论

相关推荐

    Ajax实现用户注册

    在“Ajax实现用户注册”的主题中,我们将深入探讨如何利用Ajax技术构建一个实时验证用户注册信息的系统,从而提高用户体验,减少不必要的页面刷新。 首先,Ajax的核心原理是通过JavaScript在后台与服务器进行异步...

    asp版ajax用户注册 ajax 注册程序 asp版 ajax

    【ASP版AJAX用户注册】是一个使用Active Server Pages(ASP)技术结合Ajax(Asynchronous JavaScript and XML)实现的用户注册程序。Ajax的核心在于通过JavaScript在客户端与服务器端进行异步数据交互,无需刷新整个...

    Ajax实现用户注册模块

    9. **用户体验**:为了提供更好的用户体验,可以使用即时反馈,如在用户输入时实时检测用户名是否可用,而不是等到提交后才告知用户。 10. **兼容性**:考虑到不同的浏览器和设备,应确保使用跨浏览器的Ajax实现,...

    JQ asp.net ajax 用户注册

    本项目“JQ asp.net ajax 用户注册”旨在实现一个简单的用户注册流程,利用jQuery(简称JQ)与ASP.NET AJAX技术,提供前端交互体验和后端数据处理。以下将详细介绍该系统的核心知识点: 1. **jQuery (JQ) 介绍**: ...

    ajax实现用户登录注册

    本教程将深入讲解如何使用AJAX实现用户登录和注册功能,这对于初学者来说是一个很好的起点。 首先,我们需要理解AJAX的基本结构。一个基本的AJAX调用通常涉及以下步骤: 1. 创建XMLHttpRequest对象:这是AJAX的...

    ajax动态检测用户是否已存在

    在开发Web应用时,为了提供更好的用户体验,常常需要在用户输入信息时实时验证其有效性,例如检查注册用户名是否已被占用。这就是"ajax动态检测用户是否已存在"这一功能的核心所在。Ajax(Asynchronous JavaScript ...

    ajax 检测用户名是否被占用

    在开发Web应用时,"Ajax 检测用户名是否被占用"是一个常见且重要的功能,尤其是在用户注册过程中。Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。通过Ajax,...

    Asp+Ajax检测用户名并注册Access版

    【Asp+Ajax检测用户名并注册Access版】是基于经典的Web开发技术组合——ASP(Active Server Pages)和AJAX(Asynchronous JavaScript and XML)实现的一个用户注册系统,它利用Access数据库进行数据存储。...

    ajax用户注册检查用户名

    在前端,JavaScript用于监听用户输入事件,当用户在注册表单的用户名字段中输入内容时,触发Ajax请求。这通常通过添加事件监听器,如`addEventListener('input', function() {...})`实现。函数内部会对输入进行处理...

    ajax用户注册 ajax用户注册

    总结来说,Ajax用户注册利用了Ajax的异步特性,提高了用户体验,同时配合服务器端的验证和安全措施,实现了安全有效的用户注册流程。开发者需注意前后端的交互、数据传输的安全以及错误处理,以确保功能的稳定性和...

    ajax编写用户注册的应用实例

    在探讨“ajax编写用户注册的应用实例”这一主题时,我们主要关注的是如何利用Ajax技术实现一个用户注册系统中的用户名验证功能。Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,...

    用AJAX编写用户注册时的

    ### 标题解读:用 AJAX 编写用户注册时的 此标题明确指出了文章的主要内容是关于使用 AJAX 在用户注册过程中的应用。通过 AJAX,开发者可以在不重新加载整个页面的情况下,与服务器进行数据交换,完成诸如用户名和...

    PHP使用ajax实现用户注册登录

    本项目利用AJAX与PHP结合,实现了一个用户注册登录系统,旨在提高网页的响应速度,无需刷新页面即可完成数据提交。 首先,让我们了解PHP的基础知识。PHP是一种服务器端的脚本语言,主要用于开发动态网站。它能够...

    AJAX编写用户注册实例及技术小结

    总结来说,这个AJAX用户注册实例展示了如何利用AJAX技术和JavaScript改进Web应用程序的交互性和性能,尤其是在处理实时验证和数据提交时。通过这种方式,开发者能够提供更快速、更直观的用户体验,而不需要用户频繁...

    利用Ajax实现无刷新验证用户名和密码是否正确

    "利用Ajax实现无刷新验证用户名和密码是否正确"这一技术就是为了让用户在输入登录信息时能够得到即时反馈,无需等待页面整体刷新,极大地提升了交互体验。Ajax(Asynchronous JavaScript and XML)是一种创建动态...

    ajax用户注册.rar

    在Web开发中,Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的...通过Ajax,我们可以创建一个无刷新、响应式的注册流程,提高用户体验,同时利用JavaScript和服务器端的能力确保数据的安全性和有效性。

    AJAX用户注册源码

    这个用户注册源码示例展示了如何利用AJAX来实现无刷新的用户注册功能,提高用户体验并降低服务器负载。 首先,我们要理解AJAX的核心组成部分: 1. **XMLHttpRequest对象**:这是AJAX的基础,它允许JavaScript在后台...

    ajax用户注册登录.zip

    在本教程中,我们将探讨如何利用Ajax实现用户注册和登录功能,构建一个超简单的模板,为网站提供流畅的用户体验。 1. **Ajax基础** Ajax的核心是JavaScript对象XMLHttpRequest,它允许在后台与服务器交换数据并...

    AJAX实现无刷新用户注册

    6. **前端验证与后端验证**:前端使用AJAX进行实时验证可以提高用户体验,但安全性仍需依赖后端验证,因为前端验证容易被绕过。 7. **用户体验优化**:在等待服务器响应期间,可以使用加载动画让用户知道系统正在...

Global site tag (gtag.js) - Google Analytics