HTML+JSP的用户名后台验证

最新推荐文章于 2023-01-16 10:13:30 发布

wanggong126

最新推荐文章于 2023-01-16 10:13:30 发布

阅读量3.6k

点赞数 1

文章标签： HTML JSP IE json 浏览器

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();
%>