Ajax 和 JavaScript 驗證練習

時間 2019-12-10

標籤 ajax javascript 驗證練習欄目 Ajax 简体版

原文原文鏈接

Ajax 和 JavaScript 驗證用戶登陸javascript

index.htmlphp

[html] view plain copy

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

[javascript] view plain copy

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

[php] view plain copy

<?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";
}
?>