PHP jQuery Ajax提交与验证form表单详解

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(); $("input#email").focus(); return false; } var phone = $("input#phone").val(); if (phone == "") { $("label#phone_error").show(); $("input#phone").focus(); return false; } }); }); 第2行，我们添加一个 $('.error').hide() 是为了在用户未输入任何信息时隐藏三个 class="error" 提示错误的 label 标签。而只有当出现错误，即为空时，错误才会出现，因为有 return false 的作用，每次仅会出现一个错误。 在 JQuery 里面，获取 DOM 中某个 ID 或者 Class 的值 以下为引用内容： /*** * php100.com * 2013-06-28 ***/ //获取id的值 var name = $("input#name").val(); //获取class序号为1的值 var name = $(".name")[1].val(); 现假设用户没有输入姓名，处理逻辑应该是：首先显示错误，然后将焦点定位在姓名上。转载请注明来源管理学家杂志社 http://www.400qikan.com/qk/1297/