关闭

Ajax 和 JavaScript 验证用户登录

标签: ajax验证登录
161人阅读 评论(0) 收藏 举报
分类:

Ajax 和 JavaScript 验证用户登录

index.html

[html] view plain copy
  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.     .text {  
  9.         width:180px;  
  10.         height:21px;  
  11.     }  
  12.     .userRed {  
  13.         border: 1px solid red;  
  14.         width:180px;  
  15.         height:21px;  
  16.     }  
  17. </style>  
  18. </head>  
  19. <body>  
  20.     <table border="0" align="center" style="font-size:13px;" width="300">  
  21.         <tr>  
  22.             <td align="center" colspan="2"><div id="con"></div></td>  
  23.         </tr>  
  24.         <tr>  
  25.             <td align="right" height="30">用户名:</td><td><input type="text" name="user" id="user" class="text" /></td>  
  26.         </tr>  
  27.         <tr>  
  28.             <td align="right" height="30">密码:</td><td><input type="password" name="password" id="password" class="text" /></td>  
  29.         </tr>  
  30.         <tr>  
  31.             <td align="center" colspan="2"><input type="button" id="btn" value="登录" /> <input type="button" value="重置" id="re" /></td>  
  32.         </tr>  
  33.     </table>  
  34. </body>  
  35. </html>  
  36. <script src="./js/login.js"></script>  

login.js

[javascript] view plain copy
  1. var btn = document.getElementById('btn');  
  2. var re = document.getElementById('re');  
  3. var user = document.getElementById('user');  
  4. var password = document.getElementById('password');  
  5. btn.onclick = function(){  
  6.     var isValidate=false;  
  7.     if (!user.value.match(/^\S{2,20}$/)) {  
  8.         user.className = 'userRed';  
  9.         user.focus();  
  10.         return;  
  11.     } else {  
  12.         user.className = 'text';  
  13.         isValidate=true;  
  14.     }  
  15.   
  16.     if (password.value.length<3 || password.value.length>20) {  
  17.         password.className = 'userRed';  
  18.         password.focus();  
  19.         return;  
  20.     } else {  
  21.         password.className = 'text';  
  22.         isValidate=true;  
  23.     }  
  24.     if (isValidate) {  
  25.         var ajax = Ajax();  
  26.         ajax.get('login.php?user='+document.getElementById('user').value+'&password='+document.getElementById('password').value, function(data){  
  27.             var con = document.getElementById('con');  
  28.             eval(data);  
  29.             if (login) {  
  30.                 con.innerHTML = '<font color="green">登录成功,跳转中...</font>';  
  31.                 location = 'xx.php'// 登录成功后指定跳转页面  
  32.             } else {  
  33.                 con.innerHTML = '<font color="red">帐号或密码错误!</font>';  
  34.             }  
  35.         });  
  36.     }  
  37.       
  38. }  
  39. re.onclick = function(){  
  40.     user.value="";  
  41.     password.value="";  
  42. }  

login.php

[php] view plain copy
  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. ?>  

效果展示图:

    


ajax.js 文件在前面文章可以找到,数据库结构就两个字段(user,password)即可!


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:162次
    • 积分:5
    • 等级:
    • 排名:千里之外
    • 原创:0篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档