​

Ajax 和 JavaScript 验证练习


Ajax 和 JavaScript 验证用户登录

index.html

 

[html] view plaincopy
 
  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 plaincopy
 
  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 plaincopy
 
  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）即可！

posted @ 2015-12-03 14:07  A心语  阅读(339)  评论(0)  编辑  收藏  举报
返回上一页
WEB前端｜JS | jquery