• 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.         180px;  
    10.         height:21px;  
    11.     }  
    12.     .userRed {  
    13.         border: 1px solid red;  
    14.         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）即可！
  • 相关阅读:
    php趣题小记
    git常用语法
    Go 使用小记
    小程序 显示对话框 确定-取消
    小程序 后退一页
    Vue脚手架使用步骤 2.9.6版本
    小程序 后台返回的对象数组（每个数组添加一个新的属性值）
    小程序 添加对象
    小程序图表wx-chart
    微信小程序之自定义select下拉选项框组件
  • 原文地址：https://www.cnblogs.com/wzzl/p/5016060.html
Copyright © 2020-2023  润新知