Ajax 用户登录验证

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4.   
  5. <%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>  
  6. <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>  
  7. <%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>  
  8. <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>  
  9.   
  10. <html>  
  11. <head>  
  12. < http-equivhttp-equiv="Content-Type" content="text/html; charset=UTF-8">  
  13. <title>Insert title here</title>  
  14.   
  15. < languagelanguage='java'>  
  16.   
  17. var reg = /^[\da-zA-Z][\w\.]{2,30}[\da-zA-Z]$/;   
  18. var regEmail = /^[a-zA-Z\d][\w_-]{2,14}[a-zA-Z\d]@[a-zA-Z\d]{3,5}([\.][a-zA-Z]{3}|[\.][a-zA-Z]{2}|[\.][a-zA-Z]{3}[\.][a-zA-Z]{2})$/;   
  19. newUserValidate(loginUName,loginUPwd,loginUPwdAgain,loginEmail)   
  20. {   
  21.  var loginUNameloginUName=loginUName.value;   
  22.  var loginUPwdloginUPwd =loginUPwd.value;   
  23.  var loginUPwdAgainloginUPwdAgain = loginUPwdAgain.value;   
  24.  var loginEmailloginEmail = loginEmail.value;   
  25.     
  26.  if(loginUPwd == loginUPwdAgain)   
  27.  {   
  28.   alert("一致");   
  29.  }   
  30.  else   
  31.  {   
  32.   slert("两次密码输入的不一致");   
  33.   return false;   
  34.  }   
  35.     
  36.  if(reg.test(loginUName) && reg.test(loginUPwd))   
  37.  {   
  38.      
  39.  }   
  40.  else   
  41.  {   
  42.   alert("用户名和密码只能是a-z、A-Z、0-9、下划线的字符");   
  43.   return false;   
  44.  }   
  45.     
  46.  if(regEmail.test(loginEmail))   
  47.  {   
  48.   alert("正确");   
  49.  }   
  50.  else   
  51.  {   
  52.   alert("Email输入不正确");   
  53.   return false;   
  54.  }   
  55. }   
  56. </>  
  57.   
  58. < languagelanguage="java" type="text/java">    
  59.    var syj={};   
  60.    //发送ajax请求的方法   
  61.    syj.Ajax=(url,obj){   
  62.     var httpRequest;   
  63.     if (ActiveXObject)try{httpRequest = new ActiveXObject("Microsoft.XMLHTTP");}catch (e){try{httpRequest = new ActiveXObject("Msxml2.XMLHTTP");}catch (e){}}   
  64.     if (!httpRequest){alert('不能创建XMLHTTP实例');obj.onComplete();}   
  65.     httpRequest.onreadystatechange = (){if (httpRequest.readyState == 4){obj['onComplete'](httpRequest);}}   
  66.     if(url.indexOf('machineDate')==-1) url+=(url.indexOf('?')==-1?"?":"&")+("machineDate="+new Date().getTime());   
  67.     url+=(url.indexOf('?')==-1?"?":"&")+obj.parameters;   
  68.     if(obj.asynchronous==true) httpRequest.open(obj.method, url); else httpRequest.open(obj.method, url,false);   
  69.     httpRequest.send(null);   
  70.     return httpRequest;   
  71.    };   
  72.     test(){   
  73.           
  74.        var loginUName=forms[0].loginUName.value;//获得用户名   
  75.           
  76.     var url="test.jsp?loginUName="+encodeURI(loginUName);//传用户名   
  77.        
  78.     var usernameMsg=getElementById("usernameMsg");//获得将要显示在jsp里的span标签的名字   
  79.        
  80.     if(loginUName==""){   
  81.      usernameMsg.innerHTML="<font color='red'>× 请填写用户名</font>";//用户名为空   
  82.      return false;//用户名为空停止在这   
  83.     }else{   
  84.      usernameMsg.innerHTML="<image src='process.gif'/>  正在登陆…"  
  85.     }   
  86.   
  87.        
  88.     syj.Ajax(url,{   
  89.         method  : "GET",   
  90.         parameters : "s?wd=csdn",   
  91.         asynchronous : true,   
  92.         onFailure : (httpRequest){   
  93.              alert("出错了!");   
  94.               },   
  95.         onComplete  : (httpRequest){   
  96.          if(httpRequest.status==200){   
  97.           usernameMsg.innerHTML=httpRequest.responseText;//输出test.jsp里的值   
  98.          }   
  99.          }   
  100.      }   
  101.      );   
  102.          
  103.    }   
  104.    </>  
  105.   
  106. </head>  
  107. <body>  
  108.   
  109. <html:form action="/newUser.do" method="post" onsubmit="return newUserValidate(loginUName,loginUPwd,loginUPwdAgain,loginEmail)">  
  110.   <tr>  
  111.      
  112.   <td>用户名 :</td><td><html:text property="loginUName" style="ime-mode:disabled" down="if(event.keyCode==13)event.keyCode=9"/></td>  
  113.   <span id="usernameMsg"></span>  
  114.   </tr>  
  115.   <br></br>  
  116.   <tr>  
  117.   <td>密  码 :</td><td><html:password property="loginUPwd"  style="ime-mode:disabled;width: 130 px; "/></td>  
  118.   </tr>  
  119.   <br></br>  
  120.   <tr>  
  121.   <td>重复密码:</td><td><html:password property="loginUPwdAgain"  style="ime-mode:disabled;width: 130 px; "/></td>  
  122.   </tr>  
  123.   <br></br>  
  124.   <tr>  
  125.   <td>Email :</td><td><html:text property="loginEmail"  style="ime-mode:disabled;width: 130 px; "/></td>  
  126.   </tr>  
  127.   <br></br>  
  128.       
  129.   <tr>  
  130.    <td>  
  131.     请输入验证码:<html:text property="loginCode"  style="ime-mode:disabled;width: 130 px; "/>  
  132.    </td>    
  133.   </tr>  
  134.      
  135.   <tr>  
  136.    <td>  
  137.     <html:img page="/code.do" border="0" ="this.src='/lookctrl/code.do'" alt="请输入此验证码，如看不清请点击刷新。" style="cursor:pointer" />  
  138.    </td>    
  139.   </tr>  
  140.      
  141.   <br></br>  
  142.   <tr>  
  143.    <td colspan="2" align="center">  
  144.     <html:submit value="注册"/>  
  145.    </td>  
  146.   </tr>  
  147.   <input type="button" ="test()" value="测试" />  
  148.   </html:form>  
  149.      
  150. </body>  
  151. </html>  

Test.Jsp

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <%   
  4. request.setCharacterEncoding("utf-8");   
  5. response.setContentType("text/html");   
  6. response.setCharacterEncoding("utf-8");   
  7. String loginUName=request.getParameter("loginUName");   
  8.   
  9. if(loginUName.equals("tom")){ out.print("<font color='green'>√ 用户名可用</font>");//用户名可用   
  10. }else{   
  11. out.print("<font color='red'>× 用户名重复</font>");//用户名重复   
  12. }   
  13. %>  

 

posted @ 2012-03-22 19:30  欢喜王子  阅读(423)  评论(0)  编辑  收藏  举报