Ajax 和 JavaScript 验证用户登录

转载 2016年05月31日 10:00:31

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)即可!


相关文章推荐

Ajax 和 JavaScript 验证用户登录

Ajax 和 JavaScript 验证用户登录 index.html 用户登录 .text { width:180px; height:21px; } .userRed...

Html+Javascript+Ajax实现用户登录系统

本文主要通过Html和Css建立一个简单的用户登录页面,然后通过javascript和Ajax连接上一篇文章PHP+MySQL实现用户登录注册API接口。由于博主之前一直做的是APP开发,对Web前端...

SSM框架下的二手教材交易系统之用户登录(包括表单提前验证,ajax)

用户登录的逻辑: 1.用户填写用户名后,先检验该用户名是否在数据库中存在(用户名唯一),若不存在,则页面显示不存在,需重新输入;若存在,输入密码后验证密码是否正确。 2.验证验证码是否正确。 3...

ASP.NET+ExtJs2.0+Ajax连接数据验证用户登录

var loginPanel; Ext.onReady(function() { //登录面板 loginPanel = new ...

Ajax用户登录权限验证

====================================================== 注:本文源代码点此下载 =============================...

简单实现ajax验证用户是否可以登录

无刷新判断会员是否能正确登录:登录界面代码: 用户名: ...

ajax无刷新调用struts2框架中的Action,以用户登录验证为例

前提条件:搭建好SSH框架; 本功能依赖jar包:struts2-json-plugin-2.3.24(例); 步骤:1、导入依赖jar包;2、编写action;3、配置spring;4、配置stru...
  • neil89
  • neil89
  • 2015-06-23 11:05
  • 6284

在登录页面中js进行正则验证电话号码和邮箱地址,并使用ajax进行用户ID的数据库验证

本文说的是在登录页面中使用js进行正则验证并使用ajax进行用户ID的数据库验证,另外也加入键盘监听。 先看一下登录的jsp页面代码 <% String path = request.ge...

ajax在用户登录时异步验证用户合法性

AJAX(Asynchronous JavaScript and XML) 是多种技术的综合应用, 包括XHTML、Javascript和XML等。 AJAX使用XHTML和CSS标准化呈现,使用XM...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)