PHP jQuery Ajax Form 表单提交与验证实例解析，包括创建一个表单 html 页面、添加 JQuery 代码、jquery ajax 表单提交、jquery ajax 表单验证、反馈信息给用户。php ajax 表单验证，php ajax 提交表单，php ajax form 验证，php ajax 提交 form 。

 

本实例用到 JQuery 类库本身的函数和功能，所有表单信息利用 PHPMailer 类库邮件的形式发送。

 

1、创建一个表单 html 页面

 

表单部分 html 代码

 

以下为引用内容：

/***

* php100.com

* 2013-06-28

***/

<div id="contact_form"> 

<form name="contact" method="post" action=""> 

<fieldset> 

<label for="name" id="name_label">姓名</label> 

<input type="text" name="name" id="name" size="30" value="" class="text-input" /> 

<label class="error" for="name" id="name_error">此项必填</label>

<label for="email" id="email_label">您的Email</label> 

<input type="text" name="email" id="email" size="30" value="" class="text-input" /> 

<label class="error" for="email" id="email_error">此项必填</label>

<label for="phone" id="phone_label">您的联系电话</label> 

<input type="text" name="phone" id="phone" size="30" value="" class="text-input" /> 

<label class="error" for="phone" id="phone_error">此项必填</label>

<br /> 

<input type="submit" name="submit" class="button" id="submit_btn" value="我要发送" /> 

</fieldset> 

</form> 

</div>

这里用一个 id 为 contact_form 来包含整个包含信息；这是有意义的，稍后在 JavaScript 与用户交互信息的时候会用到，这里 form 标签的属性里面既包含了 method 和 action ；这个意义其实不大，因为 Javascript 直接操作 DOM ，所以没有这两个属性也是可以的；务必要给用户输入的 input  标签加独立的 id ，这和第二点原理类似。否则，无法看到正常的效果。

 

2、添加 JQuery 代码

 

这里假设你已经从 JQuery 官方网站上下载了JQuery 基库，然后上传到了你的 WEB 服务器，并添加到你要使用的网页中。

 

现在新建一个JS文件

 

以下为引用内容：

/***

* php100.com

* 2013-06-28

***/

$(function() { 

$(".button").click(function() { 

// 处理表单验证和交给后台处理的逻辑 

}); 

}); 

第1行的 function() 函数与Jquery 的 document.ready  函数用法和功能相同，都是在 DOM  准备完毕后自动触发。第2行里面是一个单击触发函数click() ，需要注意的是，在HTML 一页提交按钮上需要放置一个名为“button”的Class ，以模拟实现submit 提交表单的功能，从第二点我们可以看出，JQuery 可以很好的将结构和逻辑分离。

 

3、jquery ajax 表单验证

 

在实际应用中，这一步是必不可少的。在用户漏填，错填某个项目时，及时提示。

 

以下为引用内容：

/***

* php100.com

* 2013-06-28

***/

$(function() { 

$('.error').hide(); 

$(".button").click(function() { 

// 验证代码

$('.error').hide(); 

var name = $("input#name").val(); 

if (name == "") { 

$("label#name_error").show(); 

$("input#name").focus(); 

return false; 

} 

var email = $("input#email").val(); 

if (email == "") { 

$("label#email_error").show(