`
qq2525
  • 浏览: 3423 次
  • 性别: Icon_minigender_1
  • 来自: 南京
文章分类
社区版块
存档分类
最新评论

HTML+JSP的用户名后台验证

HTMLJSPIEjson浏览器 
阅读更多
1.regist.html
注册的页面 包含Email账号和密码 
<html>
  <head>
  <meta http-equiv=Content-Type content="text/html;charset=utf-8">	
<title>regist</title></head>
<script type="text/javascript" src="myjs.js">

</script>

  <body>
<form action="#"  method="post">
<span  id="span_err"></span>
<hr  color="#CCCCCC"/>
<table align="center" >
<tr>
  <td>Email:</td><!-- Email-->
  <td><input type="text" id="email"  name="email"  onBlur="checkEmail()" />  </td>
  <td style="font-size:13px;width:220px;"><span id="span_email"></span><br/></td>
</tr>  
  
 <tr>
  <td>密码:</td> <!-- 密码 -->
  <td><input type="password" id="pwd" name="pwd"   onBlur="checkPwd()" />  </td>
  <td style="font-size:13px; width:220px;"><span id="span_pwd"></span><br/></td>
</tr> 

<tr>
  <td>确认密码:</td> <!-- 确认密码 -->
  <td><input type="password" id="confirmPwd"   name="confirmPwd" onBlur="valPwd()" />  </td>
  <td style="font-size:13px; width:220px;"><span id="span_confirmPwd"></span><br/></td>
</tr> 
 
 
 <tr>
 <td>
  <input type="button"  value="登陆" onClick="register()"/>   <!-- 注册 --> 
  </td>
  <td>
  <input type="reset" value="重置" onClick="clickSpan()" />  <!-- 重置 --> 
  </td>
  </tr>
  </table>
</form>
  </body>
</html>


2.myjs.js
JS文件 主要用于验证regist.html的数据合法性
在做这个JS的时候,function processResponse()
曾经遇到过HTTP500的错误,在网上找了很多的方法都没有解决,最后打开IE的选项
在高级里面把显示友好的HTTP错误信息的勾去掉,强制让代码执行后会有一个JSP报错信息弹出。此后重启tomcat服务器,HTTP500的错误不知为什么就消失。

另外就是在jsp确认的页面里面,由于缓存的原因,当你修改checkEmail.jsp页面里面
if("shark@126.com".equlas(email))
所需要修改的值的时候,保存再刷新regist.html 你输入前面的信息它依旧会报错(Email重复)。所以在请求jsp页面的时候加上了"+new Date()+",这样可以确保每次请求的页面所做的处理都不一样。 


/*F5刷新事件 清空文本框*/
function DisableF5()
{    
   with (event)
   {    
           // F5 and Ctrl+R    
     if (keyCode==116 || (ctrlKey && keyCode==82))
	 {    
       document.forms[0].email.value="";
	   document.forms[0].pwd.value="";
	   document.forms[0].confirmPwd.value="";
       return false;    
     }    
   }    
}   

function clickSpan()
{
	var span_err=document.getElementById("span_err");
	var span_email=document.getElementById("span_email");
	var span_pwd=document.getElementById("span_pwd");
	var span_confirmPwd=document.getElementById("span_confirmPwd");
	
	span_email.innerHTML="";
	span_pwd.innerHTML="";
	span_confirmPwd.innerHTML="";
	span_err.innerHTML="";
}
  
document.onkeydown = DisableF5; 


var XMLHttpReq = false;
     //创建XMLHttpRequest对象       
function createXMLHttpRequest()
{
        if(window.XMLHttpRequest) 
		{ //检测是否为Mozilla浏览器
            try
			{
              XMLHttpReq = new XMLHttpRequest();
             }
			 catch(e)
			 {
				 alert(e);
			 }
        }
        else if (window.ActiveXObject)
		{ //检测是否为IE浏览器
            try 
			{
                XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
            } 
			catch (e) 
			{
                try 
				{
                    XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
                } 
				catch (e) 
				{
					alert(e);
				}
            }
       }
}
    //发送请求方法
    function sendRequest(url) 
	{
        createXMLHttpRequest();
        XMLHttpReq.open("GET", url, true);
        XMLHttpReq.onreadystatechange = processResponse;//指定响应处理函数
        XMLHttpReq.send(null);  // 发送请求
    }
    // 处理返回信息函数
    function processResponse() 
	{
		var span_err=document.getElementById("span_err");
        if (XMLHttpReq.readyState == 4) 
		{ // 判断XMLHttpRequest对象是否已成功接收数据
            if (XMLHttpReq.status == 200) 
			{ // 请求成功
                   checkUsernameCallback();     //调用处理函数          
            } 
			else 
			{ //页面异常
			//alert(XMLHttpReq.status);
                span_err.innerHTML="<font color='red'>× 页面有错误</font>"; // 
            }
        }
	}
/*-------------------------------------------------------------------------------------------------------------------------*/
//验证用户名
var emailFlag=false;

function checkEmail()
{
	var email=document.forms[0].email.value;
	var span_email=document.getElementById("span_email");
	if(email=="" || email==null)
	{
 		 emailFlag=false;
 		 span_email.innerHTML="<font color='red'>× 请输入Email!</font>"; // 
	}
	else if(!test_Email(email))
	{
		emailFlag=false;
  		span_email.innerHTML="<font color='red'>× 请输入正确的Email!</font>"; // 
	}
	else
	{
 		 span_email.innerHTML="検証…"
 		 sendRequest("checkEmail.jsp?"+new Date()+"&email="+encodeURI(email)); // 正在验证
	}
}
function checkUsernameCallback()
{
	var json=eval('('+XMLHttpReq.responseText+')');
	var span_email=document.getElementById("span_email");
	if(json.msg==true)
	{
 		 emailFlag=true;
  		 span_email.innerHTML="<font color='green'>√ 符合要求的Email</font>"; // 
	}
	else
	{
 		 emailFlag=false;
 		 span_email.innerHTML="<font color='red'>× Email 重复</font>"; //
	}
}

function test_Email(strEmail) 
	{
                var myReg = /^([\S])+[@]{1}([\S])+[.]{1}(\S)+$/;
                if(myReg.test(strEmail)) 
				{
					return true;
				}
                return false;
    }
/*-------------------------------------------------------------------------------------------------------------------------*/
//密码验证
var pwdFlag=false;
var confirmPwdFlag=false;

function checkPwd()
{	
	var pwd=document.forms[0].pwd.value;
	var span_pwd=document.getElementById("span_pwd");
	if(""==pwd || null==pwd)
	{
		pwdFlag=false;
		span_pwd.innerHTML="<font color='red'>× 请输入密码!</font>"; // 
	}
	else
	{
		pwdFlag=true;
		span_pwd.innerHTML="";
	}
}

function valPwd()
{
		var pwd=document.forms[0].pwd.value;
		var confirmPwd=document.forms[0].confirmPwd.value;
		var span_confirmPwd=document.getElementById("span_confirmPwd");
		if(""==confirmPwd || null==confirmPwd)
		{
			confirmPwdFlag=false;
			span_confirmPwd.innerHTML="<font color='red'>× 请输入确认密码!</font>";  // 
		}
		if(pwd!=confirmPwd)
		{
			confirmPwdFlag=false;
			span_confirmPwd.innerHTML="<font color='red'>× 请确保两次密码一致!</font>"; // 
		}
		if(pwd==confirmPwd && (""!=confirmPwd && null!=confirmPwd))
		{
			confirmPwdFlag=true;
			span_confirmPwd.innerHTML="";
		}
}

//重复密码验证

/*-------------------------------------------------------------------------------------------------------------------------*/
//注册表单提交验证
function register()
{
	var span_err=document.getElementById("span_err");
	var span_email=document.getElementById("span_email");
	var span_pwd=document.getElementById("span_pwd");
	var span_confirmPwd=document.getElementById("span_confirmPwd");
	if(emailFlag==false)
	{
		span_email.innerHTML="<font color='red'>× Email错误!</font>"; // 
	}
	if(pwdFlag==false)
	{
		span_pwd.innerHTML="<font color='red'>× 密码错误!</font>"; // 
	}
	if(confirmPwdFlag==false)
	{
			span_confirmPwd.innerHTML="<font color='red'>× 确认密码错误!</font>"; // 
	}
if(emailFlag==true && pwdFlag==true &&  confirmPwdFlag==true)
{
  
   span_err.innerHTML="<font color='green'>√ 提交成功!</font>"; // 
document.forms[0].submit();
}
else
{
   span_err.innerHTML="<font color='red'>× 信息不全!</font>"; //  
}
}


3.checkEmail.jsp
获取由regist.html中传来的email参数(由于方便此处采用默认值的比较)
最后返回message 
<%
request.setCharacterEncoding("utf-8");
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
out.flush();
String email=request.getParameter("email");

String message="";
if("shark@126.com".equlas(email))
{ 
	message="{msg:false}";
}
else
{
	message="{msg:true}";
}
out.print(message);
out.close();
%>

分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax+struts+jsp的用户名验证

    【Ajax + Struts + JSP 的用户名验证】是Web应用程序开发中的一个重要环节，它涉及到前端交互、后端处理以及服务器的动态响应。在这个系统中，用户在输入用户名时，通过Ajax技术实现实时验证，避免了传统方式下提交...

    JSP+servlet的后台管理系统

    **JSP（JavaServer Pages）和Servlet是Java Web开发中的两个核心技术，用于构建动态网站和后台管理系统。在本文中，我们将深入探讨它们的工作原理、如何协同工作以及在实际项目中的应用，以帮助你理解"JSP+servlet的...

    json+jqeury+struts+js验证用户名是否存在

    ### json+jqeury+struts+js验证用户名是否存在 #### 概述 本文将详细介绍如何通过结合使用JSON、jQuery、Struts以及JavaScript技术来实现一个完整的用户名称验证系统。此系统能够有效地检测用户输入的用户名是否已...

    MyEclipse+JSP+SqlServer登录验证教程源码

    本教程主要介绍如何在MyEclipse环境中利用JSP和SqlServer数据库进行用户登录验证。这是一个常见的Web开发场景，对于初学者来说是很好的实践项目。我们将会深入理解JSP、Servlet、数据库连接以及用户验证的实现步骤。...

    Ajax+jsp注册验证用户

    在这里，我们通常会有一个处理注册验证的JSP页面，该页面接收Ajax发送过来的用户名，然后查询数据库以检查该用户名是否已被占用。 数据库要求是这个系统的关键部分。你需要确保有一个用户表，包含如用户名、密码等...

    javabean+jsp完成注册验证

    例如，一个简单的JSP页面可能包含表单元素（如文本输入框和提交按钮），以及在后台处理请求并显示错误消息的脚本片段。 以下是一个简化的步骤概述： 1. 用户打开注册页面（一个JSP文件），看到一个包含用户名、...

    1649-60套HTML5+CSS3后台管理登录模板下

    Java提供了诸如JSP、Thymeleaf等视图技术，与HTML模板进行交互，处理用户的登录请求，验证用户名和密码，并根据结果返回相应的页面或消息。 总结来说，这60套HTML5+CSS3后台管理登录模板涵盖了现代网页设计的关键...

    jsp+MyEclipse+mysql后台登陆代码

    【标题】"jsp+MyEclipse+mysql后台登陆代码"涉及了几个关键的IT知识点，主要包括JSP（Java Server Pages）、MyEclipse集成开发环境以及MySQL数据库的使用。以下是这些技术的详细介绍： **JSP（Java Server Pages）*...

    jsp+servlet超市后台管理系统

    【文件结构与组织】：根据压缩包文件名"supermarket"，我们可以推测系统的主要文件和目录可能包括：HTML/JSP页面、CSS样式表、JavaScript脚本、Java源代码（包含servlet和JSP的后台逻辑）、数据库配置文件、图片和...

    servlet+jsp+mysql在线投票系统

    这包括删除投票，修改投票内容等操作，这些功能可能需要通过特定的后台管理界面实现，同样基于Servlet和JSP技术，但需要额外的身份验证机制来确保只有管理员才能访问这些功能。 【安全性考虑】 在项目开发中，还...

    注册系统struts2+jsp+mysql

    JSP页面可以包含HTML、CSS、JavaScript，以及嵌入的Java代码，通过EL（Expression Language）和JSTL（JavaServer Pages Standard Tag Library）标签库，简化了页面与后台数据的交互。 3. **MySQL数据库**：MySQL是...

    简单的留言板程序+java+jsp+access

    在这个留言板程序中，Access可能被用作后台数据库，存储用户的留言信息，包括用户名、留言内容、时间戳等字段。 4. **数据库设计**: 使用Access创建数据库时，需要设计一个合适的表结构来存储留言数据。通常会有一...

    servlet+mysql+jsp+ajax 注册 登陆 查询 修改 的简单demo

    JSP（JavaServer Pages）是动态网页技术，允许开发者在HTML页面中嵌入Java代码。在本项目中，JSP用于渲染动态生成的用户界面。例如，登录页面可能包含一个JSP，其中的Java代码会根据用户的登录状态显示不同的内容。...

    ajax,struts2,jsp,java验证用户名是否存在

    在用户注册场景中，当用户输入用户名并提交查询时，AJAX 可以在后台向服务器发送异步请求，验证用户名是否已被占用，然后在前端显示相应的提示，提高用户体验。 **Struts2**： Struts2 是一个基于MVC（Model-View-...

    AJAX+servlet+jsp用户注册

    AJAX通过JavaScript异步地向服务器发送请求，并在后台处理响应，使得用户界面保持交互性，提高用户体验。在这个项目中，当用户填写完注册信息并点击注册按钮时，AJAX会发送一个包含这些信息的HTTP请求到Servlet，而...

    servlet+jsp登录注册页面前后台代码完整版

    2. **服务器端脚本**：在JSP中，我们可以通过`&lt;jsp:useBean&gt;`、`&lt;jsp:setProperty&gt;`等标签创建和初始化Java对象，以及`&lt;jsp:getProperty&gt;`来获取对象的属性。此外，还可以使用EL（Expression Language）和JSTL（Java...

    Ajax实现用户名验证

    在这个"Ajax实现用户名验证"的例子中，我们将深入探讨如何使用Ajax、jsp（JavaServer Pages）以及相关的前端技术来验证用户输入的用户名是否已存在，从而防止重复注册。 首先，我们需要创建一个简单的HTML表单，...

    用户登录(servlet+jsp)

    3. **JSP页面**：JSP页面用于展示登录表单，用户输入用户名和密码后，表单提交到后台的Servlet。JSP可以包含HTML、CSS和JavaScript代码，以及内嵌的Java表达式和脚本，使得动态内容生成更加灵活。 4. **数据验证**...

    登录servlet+jsp+mysql

    用户输入信息后，JSP会将这些数据提交到后台的Servlet进行处理。 3. **Model-View-Controller (MVC)架构**：这是一种软件设计模式，用于分离业务逻辑（Model）、用户界面（View）和控制逻辑（Controller）。在这个...

    用jsp做的验证用户登录和注册系统小项目

    这个项目是一个基于JSP（JavaServer Pages）技术实现的用户身份验证系统，主要用于初学者理解Web开发中的用户登录和注册流程。它利用了MySQL数据库来存储用户信息，提供了一个基本的用户管理平台。 【描述】：“用...

Magicbox
Global site tag (gtag.js) - Google Analytics