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/