如果你对JQuery的基本语法还不是很熟悉，请搜索本站的教程资源。如果你对PHPMailer用法不熟悉，请查看本站的另一篇文章《使用PHPMailer类库发送电子邮件》。
第一步，创建一个表单HTML页面
这里，我们只展示主要的表单部分HTML结构代码：
<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，这和第二点原理类似。否则，无法看到正常的效果。
第二步，开始添加JQuery代码
这里假设你已经从JQuery官方网站上下载了JQuery基库，然后上传到了你的WEB服务器，并添加到你要使用的网页中了。
现在另外新建一个JS文件，添加如下代码：
$(function() {
$(“.button”).click(function() {
// 处理表单验证和交给后台处理的逻辑
});
});
第一行的function()函数与Jquery的document.ready函数用法和功能相同，都是在DOM准备完毕后自动触发。
第二行里面是一个单击触发函数click()，需要注意的是，在HTML一页提交按钮上需要放置一个名为“button”的Class，以模拟实现submi提交表单的功能.
