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实现登录时的用户名验证(Servlet 响应)

登录提交表单使用 POST 请求进行验证及转发; 输入用户名(是否正确)及密码(是否为空) 使用 GET 请求进行验证;1. 登录界面及主页 ...
  • qq_25968195
  • qq_25968195
  • 2017年04月05日 01:43
  • 924

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

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

一个书上的Ajax登录验证的源码以及分析

1 示例描述: 登陆注册程序中,必须保证每个用户ID不能重复。这种检测用户ID的操作用Ajax完成。 行为:当用户输入ID后,会使用Ajax将信息提交到服务器上进行验证,如果此ID没有被人使用,则提示...
  • li758568825
  • li758568825
  • 2017年02月09日 17:21
  • 251

ajax 验证用户登录

UserDao 类 代码 public boolean validateLogin(String uname,String upassword){   boolean result = fals...
  • zhu_nana
  • zhu_nana
  • 2012年09月27日 10:12
  • 579

手写注册页面,并实现验证信息(AJAX,Jquery,正则表达式,密码强度验证)

@{     Layout = null; }                         $(function () {                   ...
  • u010796875
  • u010796875
  • 2014年06月18日 10:14
  • 1499

Ajax用户登录权限验证

====================================================== 注:本文源代码点此下载 =============================...
  • javazhuanzai
  • javazhuanzai
  • 2012年01月16日 05:48
  • 224

Django Ajax 登陆 验证

#前端 $(document).ready(function(){ $.getJSON("{% url 'pythonnav:ajax_list' %
  • u013205877
  • u013205877
  • 2017年08月11日 17:19
  • 442

ajax+javascript+php实现注册用户名无刷新验证

user_register.htm  用户注册的htm,             注册页面             //初始化AJAX对象 function Init...
  • nahelulu
  • nahelulu
  • 2011年08月24日 17:21
  • 4069

javascript验证用户登录信息

Insert title here              用户名:         密    码:                       ...
  • hnwolfs
  • hnwolfs
  • 2016年03月09日 20:38
  • 244

JS+AJAX(.ASHX) 实现用户登录

html代码:
  • zhouminjob120
  • zhouminjob120
  • 2015年08月29日 18:40
  • 1061
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax 和 JavaScript 验证用户登录
举报原因:
原因补充:

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