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实例详解

程序的思路主要是:页面加载时调用init判断客户端是否存有网站所需的cookies,如果有的话取相应cookies到服务端验证,通过验证显示成功提示,反之显示登录框,同样如果没有所需cookies也显...

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

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

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

最近想想自己前端知识中比较匮乏的部分, 感觉Ajax方面的内容是我比较不熟练的, 于是决定重看以前妙味课堂的视频, 然后再自己做一些前端HTML+Ajax+MYSQL+PHP的小实例, 想了想便决...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Ajax异步方式实现登录与参数的校验

登录代码这个是使用Bootstrap3的组件功能实现的 登录 ...

JQuery登陆验证

$(function(){ // 为看不清楚绑定事件 $("#see").click(function(){ $("#vimg").attr("src", "${ctx}/veri...
  • zwyjg
  • zwyjg
  • 2013年10月21日 18:30
  • 12403

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

ajax和js验证用户登录

>   html>   head>   meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   script src=...
  • swjieyi
  • swjieyi
  • 2016年05月27日 20:55
  • 162

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax 和 JavaScript 验证用户登录
举报原因:
原因补充:

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