异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则
    // 电话号码验证   
    jQuery.validator.addMethod("isPhone", function(value, element) {
        var tel = /^(\d{3,4}-?)?\d{7,9}(-?\d{1,4})?$/;   
        return this.optional(element) || (tel.test(value));   
    }, "请正确填写您的电话号码");

验证通过,表单提交。但我们常常会碰到这样的需求,当验证通过后,我不需要通过submit form的方式提交表单,我想要更灵活的通过ajax处理表单,加入很多动态的效果,提高客户体验,请看下面的例子:

有一个表单:
<form id="formId" action="">
    姓名:<input type="text" name="name">
    电话:<input type="text" name="phone">
    <input type="button" value="submit" onclick="doSubmit();">
</form>
以下是JS:
function doSubmit() {
        validateForm();//调用验证方法
        //do something else...
 }
function validateForm() {
        var validator = $("#formId").validate({
            errorElement: "em",
            success: function(em) {
                em.text("ok").addClass("success");//验证通过的动态CSS
            },
            submitHandler:function() {
                 ajaxSubmitForm();
            },//这是关键的语句,配置这个参数后表单不会自动提交,验证通过之后会去调用的方法
            rules: {
                name: {
                    required: true,
                    maxlength: 100
                },
                phone: {
                    isPhone: true
                }
            },
            messages: {
                name: {
                    required: "请填写姓名",
                    maxlength: "姓名不超过100个字符"
                }
            }
        });
    }
function ajaxSubmitForm() {
        var para = ;//组织参数
        var url = "/jajax/saveForm.do";
        $.ajax({
            type: "post",
            cache: false,
            dataType: "json",
            url: url,
            data: para,
            beforeSend: function(XMLHttpRequest){
                //do something before submit...
            },
            success: function(data, textStatus){
                //do something after submited...
            },
            complete: function(XMLHttpRequest, textStatus){
                //do something in the end...
            }
        });
    }

这样就非常灵活的完成了表单的验证和提交,其中很多时间节点都由我们自由的控制,加入任意你想做的事,是不是很方便呢...

异步提交form的时候利用jQuery validate实现表单验证的更多相关文章

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

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

  2. 基于Jquery Validate 的表单验证

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

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

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

  4. jquery.validate.js表单验证

    一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...

  5. jquery.validate.js 表单验证简单用法

    引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...

  6. layer,Jquery,validate实现表单验证,刷新页面,关闭子页面

    1.表单验证 //获取父层 var index = parent.layer.getFrameIndex(window.name); //刷新父层 parent.location.reload(); ...

  7. 【转】jquery.validate.js表单验证

    一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...

  8. [转]jquery.validate.js表单验证

    原文地址:https://www.cnblogs.com/si-shaohua/p/3780321.html 一.用前必备官方网站:http://bassistance.de/jquery-plugi ...

  9. 表单验证代码实例:jquery.validate.js表单验证插件

    jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...

随机推荐

  1. jquery ui tab跳转

    1.tabs_iframe.jsp <%-- Document : tabs Created on : 2015-2-28, 14:44:02 Author : liyulin lyl01099 ...

  2. java假设去请求一个网页的数据

    我们能够通过在java程序中模拟浏览器一样,把数据抓下来,详细方法是在java程序中set header和cookie,以下是一个样例: public class NetConnection { pu ...

  3. windows rt 扫描二维码

    项目中使用的是ZXing.net,应用商店程序.使用到的dll是ZXing.winmd. 大致思路为,使用MediaCapture捕获图片.获取到CapturePhotoToStreamAsync流, ...

  4. Linux内核分析(六)----字符设备控制方法实现|揭秘系统调用本质

    原文:Linux内核分析(六)----字符设备控制方法实现|揭秘系统调用本质 Linux内核分析(六) 昨天我们对字符设备进行了初步的了解,并且实现了简单的字符设备驱动,今天我们继续对字符设备的某些方 ...

  5. HTML基金会2----联系,像, 第,对齐

    ios讨论组1团:135718460 在web开发中.排版,布局非常重要,因此我们要把基础的东西打坚固,大家不要 慌,慢慢来. 直接把代码拿过去,直接就能够执行的. 1.标题 2.段落 3.HTML ...

  6. (大数据工程师学习路径)第四步 SQL基础课程----创建数据库并插入数据

    一.练习内容 1.新建数据库 首先,我们创建一个数据库,给它一个名字,比如“mysql_shiyan”,以后的几次实验也是对mysql_shiyan这个数据库进行操作. 语句格式为“CREATE DA ...

  7. java多线程学习(一)

    一.操作系统线程和进程的概念 线程是指进程中的一个运行单元,这个过程中也可调度实体. 线程与进程的差别: (1)地址空间:线程为进程内的一个运行单元.进程至少有一个线程(进程的主线程):进程的全部线程 ...

  8. Struts1和Struts2对照

    最近学习Struts1和Struts2.好多人.提到非常多的信息. Struts2不从Struts1进化. Struts2的前身WebWork. 呢,看了一些资料,下边就来比較比較. 一.架构分析 S ...

  9. SSIS从理论到实战,再到应用(6)----SSIS的自带日志功能

    原文:SSIS从理论到实战,再到应用(6)----SSIS的自带日志功能 上期回顾: SSIS从理论到实战,再到应用(5)----流程控制之Foreach循环 博主最近新负责了一个ssis大项目的架构 ...

  10. 有趣iOS开展 - 网络请求

    网络请求 $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split(' ...