ajax和js验证用户登录

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    2. <html>  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    5. <script src="./js/ajax.js"></script>  
    6. <title>用户登录</title>  
    7. <style type="text/css">  
    8.     //不同的class名对应不同验证状态
    9.     .text {  
    10.         width:180px;  
    11.         height:21px;  
    12.     }  
    13.     .userRed {  
    14.         border: 1px solid red;  
    15.         width:180px;  
    16.         height:21px;  
    17.     }  
    18. </style>  
    19. </head>  
    20. <body>  
    21.     
    22.     <table border="0" align="center" style="font-size:13px;" width="300">  
    23.         <tr>  
    24.             <td align="center" colspan="2"><div id="con"></div></td>  
    25.         </tr>  
    26.         <tr>  
    27.             <td align="right" height="30">用户名:</td>
    28.     <td>
    29.                   <input type="text" name="user" id="user" class="text" />
    30.             </td>  
    31.         </tr>  
    32.         <tr>  
    33.             <td align="right" height="30">密码:</td>
    34.             <td>
    35.                <input type="password" name="password" id="password" class="text" />
    36.     </td>  
    37.         </tr>  
    38.         <tr>  
    39.             <td align="center" colspan="2">
    40. <input type="button" id="btn" value="登录" />
    41. <input type="button" value="重置" id="re" />
    42.     </td>  
    43.         </tr>  
    44.     </table>  
    45. </body>  
    46. </html>  
    47. <script>
    48. window.onload = funciton(){
    49. var btn = document.getElementById('btn');
    50. var re = document.getElementById('re');  
    51. var user = document.getElementById('user');
    52. var password = document.getElementById('password');
    53. btn.onclick =function(){
    54. var validate = false;
    55. //初始化状态
    56. if(!user.value.math(/^\s{2,10}$/)){
    57. user.className = 'userRed';
    58. user.focus();
    59. return;
    60. }else{
    61. user.className = 'text';
    62. validata = true;
    63. }
    64. if(password.value.length<3 || password.value.length>20){
    65. password.className = 'passRed';
    66. password.focus();
    67. return;
    1. }else{password.className = 'text';
    2. validata = true;
    3. //如果验证的结果为真则发生AJAX请求
    4. }
    5. if(validata){
    6.   var ajax = Ajax();
    7.   //创建一个ajax实例
    8.   ajax.get("index.php?user="+document.getElementById('user').value+'&password='+document.getElementById('password').value,function(data){
    9.   var con = document.getElementById('con');
    10. eval(data);
    11. if(index){
    12. con.innerHTML("<span style="color:red">正在登录...</span>");
    13. location = 'index.html';//登录成功跳转的指定的页面
    14.   }
    15.   else{ con.innerHTML("<span style="color:red">用户名密码输入不正确!</span>");
    16. }
    17.  
    18. }
    19. re.onclick = function(){
    20. user.value = '';
    21. password.value = '';
    22. }
    23. }
    24. </script> 

    1. //以下为php代码
      1. <?php  
      2. require_once './config.inc.php';  
      3. $m = new Model();  
      4. $user = $_GET['user'];  
      5. $password = $_GET['password'];  
      6. $count = $m->total('users'"user='"$user ."' and password='". sha1($password) ."'");  
      7. if ($count) {  
      8.     setcookie('user'$user);  
      9.     echo "var login=true";  
      10. else {  
      11.     echo "var login=false";  
      12. }  
      13. ?>  
























你可能感兴趣的:(JavaScript,Ajax)