Ajax 和 JavaScript 验证用户登录

原创 2012年01月29日 17:34:59

Ajax 和 JavaScript 验证用户登录

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./js/ajax.js"></script>
<title>用户登录</title>
<style type="text/css">
	.text {
		width:180px;
		height:21px;
	}
	.userRed {
		border: 1px solid red;
		width:180px;
		height:21px;
	}
</style>
</head>
<body>
	<table border="0" align="center" style="font-size:13px;" width="300">
      	<tr>
        	<td align="center" colspan="2"><div id="con"></div></td>
        </tr>
        <tr>
			<td align="right" height="30">用户名:</td><td><input type="text" name="user" id="user" class="text" /></td>
		</tr>
		<tr>
			<td align="right" height="30">密码:</td><td><input type="password" name="password" id="password" class="text" /></td>
		</tr>
		<tr>
			<td align="center" colspan="2"><input type="button" id="btn" value="登录" /> <input type="button" value="重置" id="re" /></td>
		</tr>
	</table>
</body>
</html>
<script src="./js/login.js"></script>

login.js

var btn = document.getElementById('btn');
var re = document.getElementById('re');
var user = document.getElementById('user');
var password = document.getElementById('password');
btn.onclick = function(){
	var isValidate=false;
	if (!user.value.match(/^\S{2,20}$/)) {
		user.className = 'userRed';
		user.focus();
		return;
	} else {
		user.className = 'text';
		isValidate=true;
	}

	if (password.value.length<3 || password.value.length>20) {
		password.className = 'userRed';
		password.focus();
		return;
	} else {
		password.className = 'text';
		isValidate=true;
	}
	if (isValidate) {
		var ajax = Ajax();
		ajax.get('login.php?user='+document.getElementById('user').value+'&password='+document.getElementById('password').value, function(data){
			var con = document.getElementById('con');
			eval(data);
			if (login) {
				con.innerHTML = '<font color="green">登录成功,跳转中...</font>';
				location = 'xx.php'; // 登录成功后指定跳转页面
			} else {
				con.innerHTML = '<font color="red">帐号或密码错误!</font>';
			}
		});
	}
	
}
re.onclick = function(){
	user.value="";
	password.value="";
}

login.php

<?php
require_once './config.inc.php';
$m = new Model();
$user = $_GET['user'];
$password = $_GET['password'];
$count = $m->total('users', "user='". $user ."' and password='". sha1($password) ."'");
if ($count) {
	setcookie('user', $user);
	echo "var login=true";
} else {
	echo "var login=false";
}
?>

效果展示图:

  


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


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Ajax实现简单的登录验证与帐号注册

上一篇博客介绍了Ajax的GET和POST方法以及上传文件的进度条展示,这篇博客将介绍一个简单的登录与注册功能的实现

利用Ajax异步验证用户名是否已被注册

今天做登录/注册系统的时候需要验证用户名是否已被注册,用表单提交然后servlet判断会刷新一下,原来的已填写的数据不会保存以及用户体验差,查了一下发现Ajax可以实现。 1.在script里创建一个...

PHP 批量生成静态html

众所周知,大部分网站的新闻资讯或商品信息都是静态页面。这样做的好处主要是为了:1、加快访问速度,避免过多的操作数据库;2、SEO优化,便于搜索引擎收录。         本示例围绕 CMS 系统的静...

Android的MediaPlayer架构介绍

第一部分 MediaPlayer概述         Android的MediaPlayer包含了Audio和video的播放功能,在Android的界面上,Music和Video两个应用程序都是调用...

十一个常见的PHP安全细则

PHP本身再老版本有一些问题,比如在 php4.3.10和php5.0.3以前有一些比较严重的bug,所以推荐使用新版。另外,目前闹的轰轰烈烈的SQL Injection也是在PHP上有很多利用方式,...

SpringMvc详解

一Spring mvc是什么 二Spring mvc运行流程架构 三组件说明 1DispatcherServlet前端控制器 2HandlerMapping处理器映射器 3Handler处理器 4Ha...

第一个 Ajax 入门实例

Ajax var xmlHttp; // 定义一个全局变量 xmlHttp // 创建 XMLHttpRequest 对象 function createX...

Ajax 实现无刷新分页

注:本文中使用到的一些类库在前面文章都能找到源代码,我会在文中指明链接所在,为了缩短文章篇幅,由此带来的阅读不便,敬请谅解。 本文讲解 Ajax 实现无刷新分页、实现原理、代码展示、代码下载。 这里...

漂亮的 PHP 验证码类

<?php //验证码类   class ValidateCode { private $charset = 'abcdefghkmnprstuvwxyzABCDEFGHKMNPRSTUVWXY...

Ajax小实例验证登录框---经验总结

最近想想自己前端知识中比较匮乏的部分, 感觉Ajax方面的内容是我比较不熟练的, 于是决定重看以前妙味课堂的视频, 然后再自己做一些前端HTML+Ajax+MYSQL+PHP的小实例, 想了想便决...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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