您的位置：首页 > Web前端 > JavaScript

ajax和js验证用户登录

2016-05-27 20:55 411 查看

<!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">

//不同的class名对应不同验证状态

.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>

window.onload = funciton(){

var btn = document.getElementById('btn');

var re = document.getElementById('re');

var user = document.getElementById('user');

var password = document.getElementById('password');

btn.onclick
=function(){

var
validate = false;

//初始化状态

if(!user.value.math(/^\s{2,10}$/)){

user.className
= 'userRed';

user.focus();

return;

}else{

user.className
= 'text';

validata
= true;

}

if(password.value.length<3 || password.value.length>20){

password.className
= 'passRed';

password.focus();

return;

}else{password.className
= 'text';

validata
= true;

//如果验证的结果为真则发生AJAX请求

}

if(validata){

var ajax = Ajax();

//创建一个ajax实例

ajax.get("index.php?user="+document.getElementById('user').value+'&password='+document.getElementById('password').value,function(data){

var
con = document.getElementById('con');

eval(data);

if(index){

con.innerHTML("<span style="color:red">正在登录...</span>");

location = 'index.html';//登录成功跳转的指定的页面

}

else{
con.innerHTML("<span style="color:red">用户名密码输入不正确!</span>");

}

}

re.onclick = function(){

user.value = '';

password.value = '';

}

}

</script>

//以下为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";

}

?>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航