本实例用到 JQuery 类库本身的函数和功能,所有表单信息利用 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="" 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="" 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="" 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() { 
        // 处理表单验证和交给后台处理的逻辑 
    }); 
});  第1行的 function() 函数与Jquery 的 document.ready  函数用法和功能相同,都是在 DOM  准备完毕后自动触发。第2行里面是一个单击触发函数click() ,需要注意的是,在HTML 一页提交按钮上需要放置一个名为“button”的Class ,以模拟实现submit 提交表单的功能,从第二点我们可以看出,JQuery 可以很好的将结构和逻辑分离。
 
、jquery ajax 表单验证
 
在实际应用中,这一步是必不可少的。在用户漏填,错填某个项目时,及时提示。
 
$(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 的值
 
以下为引用内容: //获取id的值 
var name = $("input#name").val(); 
//获取class序号为1的值 
var name = $(".name")[].val(); 
现假设用户没有输入姓名,处理逻辑应该是:首先显示错误,然后将焦点定位在姓名上。
 
以下为引用内容: if (name == "") { //用户名为空 
    $("label#name_error").show(); //错误提示 
    $("input#name").focus(); //焦点定位 
    return false; //返回 
}
在必填的字段上验证时,都必须 return false ,否则会出现必填项未填完即提交的情况。
 
、Jquery Ajax 提交表单
 
这是实现无刷新提交的核心步骤,通过 ajax 函数来递交 javascript 从 DOM 中获取的表单项值,然后异步提交给后台处理程序process.php ,并发送Email ,此步紧接在验证程序之后:
 
以下为引用内容: var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone; 
//alert (dataString);return false;
$.ajax({ 
    type: "POST", 
    url: "bin/process.php", 
    data: dataString, 
    success: function() { 
        $('#contact_form').html("<div id='message'></div>"); 
        $('#message').html("<h2>联系方式已成功提交!</h2>").append("<p>Script design</p>").hide().fadeIn(, function() { 
            $('#message').append("<img id='checkmark' src='images/check.png' />"); 
        }); 
    } 
}); 
return false; 核心函数是 .ajax() ,它所起得作用就是使用 POST 方式将已经获取的表单信息 dataString 异步传送给所定义的后台 PHP url(bin/process.php) 。如果数据成功传送,它会将一系列我们定义好的信息返回给用户。最后 return false ,这样是为了防止页面重新加载。
 
除了返回成功信息和发送邮件外,我们还可以做其他一些更广泛的事情。比如,将获得的数据交由后台脚本处理时,将数据插入数据库中,然后再将用户提交的信息返回,因为:
 
首先,获取表单项的值:
 
以下为引用内容: var name = $("input#name").val(); 
var email = $("input#email").val(); 
var phone = $("input#phone").val(); 
//将表单项的值组合成一个字符串 
var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone; 
将此组合字符串的值通过AJAX 函数传递给后台 url ,如果成功,则会返回成功信息给用户:
 
以下为引用内容: $.ajax({ 
    type: "POST", 
    url: "bin/process.php", 
    data: dataString, 
    success: function() { 
        $('#contact_form').html("<div id='message'></div>"); 
        $('#message').html("<h2>Contact Form Submitted!</h2>").append("<p>We will be in touch soon.</p>").hide().fadeIn(, function() { 
            $('#message').append("<img id='checkmark' src='images/check.png' />"); 
        }); 
    } 
}); 
return false;、反馈信息给用户
首先,在信息提交成功之后,JQuery 会通过以下部分动态的替换掉 <div id="contact_form"></div> 中的内容:
 
以下为引用内容: $('#contact_form').html("<div id='message'></div>"); 
所以请大家记住,如果你以后需要通过 JavaScript 动态的替换掉某个层或者span ,可以使用 Jquery 的 .html 方法实现。其次,有了这个层肯定还不够,因为里面还没有内容,所以,我们还要给id=message的这个层添加一些显示内容:
 
以下为引用内容: $('#message').html("<h2>联系方式已成功提交!</h2>") 
同样是动态的为 id 为 message 的层添加了一段 html 用于提示。还可以利用 append 方法在 message 层中追加一句:
 
以下为引用内容: .append("<p>We will be in touch soon.</p>") 
最后为了表现出提交之后,服务器处理的动态效果,我们设置了以下特效代码:
 
以下为引用内容: .hide() //整个层消失 
.fadeIn(, function() {//在1500毫秒内逐渐出现 
    //最后再动态追加一个成功图标 
    $('#message').append("<img id='checkmark' src='images/check.png' />"); 
});

jquery php ajax 表单验证的更多相关文章

  1. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  2. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  3. 基于Jquery Validate 的表单验证

    基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...

  4. 异步提交form的时候利用jQuery validate实现表单验证

    异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则    // 电话号码验证    ...

  5. 第一百八十五节,jQuery,Ajax 表单插件

    jQuery,Ajax 表单插件 学习要点: 1.核心方法 2.option 参数 3.工具方法 传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款 form.js 表单的 ...

  6. 基于jQuery的Validate表单验证

    表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋 ...

  7. 基于Bootstrap+jQuery.validate Form表单验证实践

    基于Bootstrap jQuery.validate Form表单验证实践 项目结构 :     github 上源码地址:https://github.com/starzou/front-end- ...

  8. jQuery.validate.js表单验证插件

    jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

  9. jQuery Validation Engine 表单验证,自定义规则验证方法

    jQuery Validation Engine 表单验证说明文档http://code.ciaoca.com/jquery/validation-engine/ js加到jquery.validat ...

随机推荐

  1. 根据某列,将两个 dataframe 合并

    import pandas as pd import numpy as np df1 = pd.DataFrame(np.array([['a', 5, 9], ['b', 4, 61], ['c', ...

  2. linux 多线程 LinuxThreads(转)

    Linux 线程实现机制分析 http://www.ibm.com/developerworks/cn/linux/kernel/l-thread/ 上面文章分析的非常透彻 按照教科书上的定义,进程是 ...

  3. 使用C#进行图片转换格式,缩放,自动旋转,保留exif(转载)

    这几天心血来潮做了一个批量图片缩放,转换格式,并且可以根据exif的信息旋转图片,校正exif信息后保存的小程序.根据配置文件 指定需要的功能. 1 2 3 4 5 6 7 8 9 10 11 12 ...

  4. 每日构建【Daily Build Using CruiseControl.NET and MSBuild】(转载)

    在上一篇项目 管理实践教程二.源代码控制[Source Control Using VisualSVN Server and TortoiseSVN]中 我们已经讲解了如何使用TortoiseSVN和 ...

  5. C++_Eigen函数库用法笔记——Block Operations

    Using block operations rvalue, i.e. it was only read from lvalues, i.e. you can assign to a block Co ...

  6. POJ 3274 Gold Balanced Lineup

    Gold Balanced Lineup Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 10924 Accepted: 3244 ...

  7. java笔记--使用线程池优化多线程编程

    使用线程池优化多线程编程 认识线程池 在Java中,所有的对象都是需要通过new操作符来创建的,如果创建大量短生命周期的对象,将会使得整个程序的性能非常的低下.这种时候就需要用到了池的技术,比如数据库 ...

  8. WeakReference(弱引用)

    原地址:http://www.cnblogs.com/bayonetxxx/archive/2009/06/02/1494728.html 我们平常用的都是对象的强引用,如果有强引用存在,GC是不会回 ...

  9. 采用Unity快速开发高质量游戏的若干优化建议

    http://files.cnblogs.com/123ing/%E9%87%87%E7%94%A8Unity%E5%BF%AB%E9%80%9F%E5%BC%80%E5%8F%91%E9%AB%98 ...

  10. spring+hibernate常见异常集合

    spring+hibernate出错小结: (1)java.lang.NoClassDefFoundError: org/hibernate/context/CurrentSessionContext ...