基于PHP与Ajax的表单验证功能

博客原文地址：http://www.kapeter.com/archives/312

直接进入正题。
今天讨论的是基于PHP与Ajax的表单验证功能，因此我们把关注点放在功能的实现，界面代码部分直接忽略。

首先，我用bootstrap快速搭建了一个登录界面。

接着，我需要为按钮添加click事件，实现点击按钮进行认证的功能，同时添加键盘监听事件，使得按下回车键也能实现同样的功能。
代码如下：

$(document).ready(function(){
    $("#login_btn").bind("click",login_check);
});
//监听键盘事件
$(document).keydown(function (event) {
    if (event.keyCode == 13){
        login_check();
    }
})
function login_check() { //按钮点击事件
    var $name = $("#InputEmail"); //用户名
    var $pass = $("#InputPassword"); //密码
    if ($name.val() != "" && $pass.val() != "") {
        UserLogin($name.val(), $pass.val());
    }
    else {
        if ($name.val() == "") {
            $("#divMsg").html("用户名不能为空!").show(200);
            $name.focus();
            return false;
        } else {
            $("#divMsg").html("密码不能为空!").show(200);
            $pass.focus();
            return false;
        }
    }
}

当用户正确输入用户名和密码后，我们将值传递给UserLogin函数，在该函数中，我们设置了ajax传递。以POST请求的方式，将我们获得的数据通过ajax传递给logincheck.php，之后logincheck.php会返回一个值，我们通过对于这个值来判断用户是否输入正确，如果正确，页面跳转；如果失败，弹出提示。（需要说明的一点，返回值是我们自己设定的，你也可以把true换成另外值。）

function UserLogin(name, pass) {
    $.ajax({
        type: "POST",
        url: "functions/logincheck.php",
        data: "action=Login&d=" + new Date() + "&name=" + name + "&pwd=" + pass,
        success: function(data) {
	    console.log(data);
            if (data == true) {
                window.location = "index.html";
            }
            else {
                $("#divMsg").html(data).show(200);
            }
        }
    });
}

前端部分代码到此就完成了，下面来看看后台的php代码。由于php文件不能直接运行，这里，我在本地用wamp搭建了一个本地服务器，同时，在mysql数据库中创建了user表，来进行测试。
首先，我们需要连接mysql数据库。

<?php
	//登录本机MySQL系统
	$sql = mysql_connect('localhost','root',''); 
	if (!$sql) { 
		die('Could not connect to MySQL: ' . mysql_error()); 
	} else{
		//连接ThinkTank数据库
		$db=mysql_select_db("ThinkTank");
		if (!$db){
			die('Could not connect to Database: ' . mysql_error()); 
		}
	} 
?>

因为这段代码会被项目里的绝大多数php文件使用，因此我把它单独写在一个名为conn.php文件中，并通过include函数进行调用。这里，我们也可以进行测试，在localhost中访问这份文件，如果没用出现任何提示，则说明成功连接到了mysql数据库。

接着，我们创建logincheck.php文件。

<?php 
	include '../conn/conn.php'; 
	header("Content-type: text/html; charset=utf8"); 
	$username=$_POST['name'];
	$pwd=$_POST['pwd'];
 
	$sql="select * from user where username='".$username."' and pwd='".$pwd."'";
	$result= mysql_query($sql);
	if ($row = mysql_fetch_row($result)){
		echo true;
	}else{
		echo "用户名或密码错误!";
	}
 
?>

前面，我们已成功连接到了数据库，因此我们直接进行验证。首先通过$_POST获取从前端传递过来的数据，然后，构建SQL语句进行查询，当数据库中存在该用户，并密码正确，我们返回true，前面我们已经说过了，这个值将被前端的ajax代码所接收并使用。

至此，我们完成了表单验证功能。

总结一下，通过这个小案例，我们基本了解了前后端交互的基本流程，即通过ajax将数据传递给后台，后台接受数据进行分析，并返回一个值，ajax接收该返回值进行下一步的处理，至此实现了前后端的分离。当然，我们可以看到返回值是自行规定的，因此，在实际项目中，需要前后端人员事先约定返回的数据结构，才能保证双方的合作顺利进行。