tagged “Web开发”
登陆验证应该是Web程序员必须掌握的最基本的东西了，乍看起来似乎很简单，但随着学习相关技术的深入，考虑到安全性，用户体验等方面的要求，其实不简单，下面就以我做的一个小项目（回味乐食品网站）后台登陆页面为例来说明。
简单的登陆页面：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../css/stylesheet.css" type="text/css" media="screen,print"> <title>回味乐食品厂-用户登录</title> </head> <body> <form name="login" action="" method="post" style="margin-top:80px">
<table align="center">
<tr>
<td>用户名:</td>
<td><input type="text" name="user" id="user"></td> <td class="resetMsg" id="userMsg" /></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" id="password"></td> <td class="resetMsg" id="psdMsg" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="login" id="login" value="登陆" align="left" style="width:60" onClick="javascript:return CheckTxt();" /></td> </tr>
</table>
</form> </body> </html>
页面的表单有两个输入框，分别输入用户名和密码，id为"login"的提交按钮在提交时触发Javascript方法CheckTxt()验证用户输入。由于Javascript方法是在客户端实现，所以验证仅限于对输入内容是否为空的判断，为了更好的用户体验，出错提示不采用弹出对话框的方式，而是把提示内容输出到输入框右边的<td>内容框当中（id分别为userMsg和psdMsg）。下面是列出了所有可能的情况和出错时输出的提示：
- user为空，password也为空：userMsg和psdMsg分别给出"缺少用户名"和"缺少密码"的提示；
- user为空，password不为空：userMsg给出"缺少用户名"的提示，同时psdMsg的提示为空；
- user不为空，password为空：userMsg的提示为空，psdMsg给出"缺少密码" 的提示；
- user和password均不为空：userMsg和psdMsg的提示都为空。
为了让验证更高效，在程序具体实现的时候要先考虑出错的情况，也就是前面三种，出现错误就立即终止并返回false，这样就不必再往下执行判断了。
Javascript方法CheckTxt()：
<script type="text/javascript">
function CheckTxt()
{
var user = document.getElementById("user").value
var password = document.getElementById("password").value
if( user == "") //用户名为空
{
document.getElementById("userMsg").innerHTML ="缺少用户名";
document.getElementById("user").focus();
if(password == "") //用户名为空且密码为空
{
document.getElementById("psdMsg").innerHTML = "缺少密码";
} else //用户名为空，密码不为空
{
document.getElementById("password").value ="";
document.getElementById("psdMsg").innerHTML ="";
}
return false;
} else if(password == "") //用户名不为空，密码为空
{
document.getElementById("userMsg").innerHTML ="";
document.getElementById("psdMsg").innerHTML = "缺少密码";
document.getElementById("password").focus();
return false;
}
else //用户名和密码都不为空
{
return true;
}
}
</script>
上面提到，在出错一旦发生，就需要给出出错提示从方法中返回，再看上面代码，为什么在用户名为空的情况，没有立即返回false，还需要再判断密码是否为空呢？仔细想一下就会清楚，如果在只判断了用户名为空的情况下就立即返回false，那么在用户名和密码都为空的情况下页面只会提示"缺少用户名"，不够全面和准确。如果你再仔细看看淘宝网和Gmail的登陆页面，就会更明白了。
还要注意的一个细节是在判断为空后应该设置焦点，以方便用户输入。
完成了客户端的验证，下面就要在服务器端进行验证了。为了更准确地给出出错信息，在查询MySQL数据库中的记录时，查询条件可以只指定用户名，这样就能够判断数据库中是否有用户输入的用户，如果没有，就给出"没有此用户"的提示，如果有，则进一步把用户输入密码和数据库中的记录进行对比。为了防止SQL注入攻击，在查询和比对的时候需要用mysql_real_escape_string()方法对表单提交的字段的内容中的特殊字符进行转义。
PHP验证代码清单：
<?php
//处理未登陆时访问此页面的情况
if(is_null($_SESSION['login'])){
//处理表单提交后的情况
if(isset($_POST["user"])){
$user = $_POST["user"];
$password = $_POST["password"];
require("../include/dbconnect.txt");
db_connect();
//用mysql_real_escape_string() 函数对用户输入进行转义，防止SQL注入攻击
$queryUser = "select * from users where user ='" .mysql_real_escape_string($user)."'";
$result = mysql_query($queryUser);
$row = mysql_fetch_array($result);
if(!$row) { //如果用户名不存在
print '<script type="text/javascript">';
print "document.getElementById('userMsg').innerHTML ='用户名不存在'\n";
print "document.getElementById('user').focus()";
print '</script>';
} else { //如果存在，对比数据库中的密码和用户输入的密码（先进行转义 ）
if($row["password"] == mysql_real_escape_string($password)) {
if(is_null($_SESSION["url"])) {
print '<script type="text/javascript">';
print 'self.location.href= "index.php"';
print '</script>';
} else { //未登陆的情况下从"其他页面"redirect到此登陆页面， 登陆成功后页面直接跳转到"其他页面"，而不是index.php
print '<script type="text/javascript">';
print "self.location.href='".$_SESSION["url"]."'";
print '</script>';
}
$_SESSION["login"] = 1;
} else {
print '<script type="text/javascript">';
print "document.getElementById('psdMsg').innerHTML = '密码不匹配'\n"
print "document.getElementById('user').value ='".$user."'\n";
print "document.getElementById('password').focus()";
print '</script>';
}
}
mysql_close();
}
} else {
print '<script type="text/javascript">';
print "window.onload = function()\n";
print "{";
print "document.getElementById('user').focus()\n";
print "}";
print '</script>';
//登陆后再访问此页面的情况，清除会话$_SESSION['login']
unset($_SESSION['login']);
unset($_SESSION['url']);
}
?>
这个例子是整个网站的一部分，所以以上这段代码有几处需要注意的地方：is_null($_SESSION['login'])是对SESSION变量$_SESSION['login']进行判断，如果用户在未登陆的情况下访问此页面（听着似乎有些矛盾，呵呵），则值为Null。用户在已登录的情况下再访问登陆页面，会清除会话$_SESSION['login']。
另外，在PHP代码中当中调用Javascript需注意如果Javascript代码语句有多行， 在每行结束时要加上\n，而且要被包含在""中，因为''在PHP不能对\n进行转义。
实例在这里：http://www.zhouhongquan.com/projects/hwlsp/admin/login.php
