HTML+JSP的用户名后台验证
1.regist.html
注册的页面 包含Email账号和密码
2.myjs.js
JS文件 主要用于验证regist.html的数据合法性
在做这个JS的时候,function processResponse()
曾经遇到过HTTP500的错误,在网上找了很多的方法都没有解决,最后打开IE的选项
在高级里面把显示友好的HTTP错误信息的勾去掉,强制让代码执行后会有一个JSP报错信息弹出。此后重启tomcat服务器,HTTP500的错误不知为什么就消失。
另外就是在jsp确认的页面里面,由于缓存的原因,当你修改checkEmail.jsp页面里面
if("[email protected]".equlas(email))
所需要修改的值的时候,保存再刷新regist.html 你输入前面的信息它依旧会报错(Email重复)。所以在请求jsp页面的时候加上了"+new Date()+",这样可以确保每次请求的页面所做的处理都不一样。
3.checkEmail.jsp
获取由regist.html中传来的email参数(由于方便此处采用默认值的比较)
最后返回message
注册的页面 包含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("[email protected]".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("[email protected]".equlas(email))
{
message="{msg:false}";
}
else
{
message="{msg:true}";
}
out.print(message);
out.close();
%>