jQuery取得select选中的值

jQuery("#select1  option:selected").text();

相信很多人都用过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...
            }
        });
    }

jquery validate form 异步提交的更多相关文章

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

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

  2. 使用jquery.form异步提交注意jquery.validate需要手动添加验证

    使用jquery.form.js异步提时,即使jquery.validate验证失败也会提交的所以加个$("form").valid()来判断是否通过验证: $("#fo ...

  3. jquery validate不用submit提交,用js提交的

    jquery validate控件 默认是使用submit提交的, 要想改成使用button的click事件处理函数中手工提交, 可以按照如下方式操作: 1 绑定form的validate, 2 然后 ...

  4. jQuery——表单异步提交

    如果不做任何处理,表单提交时会刷新页面,为了改善体验,可以使用jQuery做到异步提交表单:通过$("#form").serialize()将表单元素的数据转化为字符串,然后通过$ ...

  5. jquery validate如何不提交表单就做验证(ajax提交数据)

    if($("#FromID").valid()){ $.ajax({ type:'post', url:'/CampaignOrderRelations/save', data:{ ...

  6. jquery validate 在ajax提交表单下的验证方法

    $(function() {  var method='${method }';  if(method == 'edit'){   url="${ctx}/commodity/typeReN ...

  7. Jquey Form 异步提交文件参数并且在http 信息头header中加上一定参数

    1.下载jQuery.Form 包 官网下载:http://jquery.malsup.com/form/#download 2.模拟代码: <!DOCTYPE html> <htm ...

  8. amazeui表单form异步提交方法

    // 留言提交 $(function() { var $form = $('#ue-form'); $form.validator({ validateOnSubmit: true, submit: ...

  9. jQuery - 几种异步提交方式

    $.post(url,params,callback); $.post("${ctx}/role/grant", {userId : $("#userId"). ...

随机推荐

  1. Symfony2之创建一个简单的web应用

    Symfony2——创建bundle       bundle就像插件或者一个功能齐全的应用,我们在应用层上开发的应用的所有代码,包括:PHP文件.配置文件.图片.css文件.js文件等都会包含在bu ...

  2. 我和小美的撸码日记(3)之一句话搞定MVC表单页数据绑定与提交

    “尼玛哥,你今天有空么?” “今天周日呀,怎么会没空,你这是要约么?麻辣烫凉皮我都吃,在哪儿,我一会儿就到.” “约你妹呀,我昨天都加一天班了,东西到现在还没搞完,你给我快点过来呀,我需要你!” “别 ...

  3. IOS单例模式(Singleton)

    IOS单例模式(Singleton)   单例模式的意思就是只有一个实例.单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例.这个类称为单例类. 1.单例模式的要点: 显然单例模 ...

  4. [POJ] 2239 Selecting Courses(二分图最大匹配)

    题目地址:http://poj.org/problem?id=2239 Li Ming大学选课,每天12节课,每周7天,每种同样的课可能有多节分布在不同天的不同节.问Li Ming最多可以选多少节课. ...

  5. Borland license information was found,but it is not valid for delphi.

    The start Delphi7 come amiss: Borland license information was found,but it is not valid for delphi. ...

  6. python 执行shell命令

    1.os模块中的os.system()这个函数来执行shell命令 1 2 3 >>> os.system('ls') anaconda-ks.cfg  install.log  i ...

  7. 走进C++程序世界-------类的定义和使用(数据成员和方法成员,析构函数,构造函数,内联实现)

    类的成员简介 在C++中,可以通过声明一个类来穿件一种新的类型.类将一组变量(他们的类型通常不同)和一组相关的函数组合在一起.类可以有各种类型的变量组成,还可以包含其他类对象.成员变量称为数据成员它们 ...

  8. java实现二维码

    说起二维码,微信好像最先启用,随后各类二维码就开始流行起来了.那什么是二维码呢. 1.什么是二维码?百度一下即可 http://baike.baidu.com/view/132241.htm?fr=a ...

  9. apache 启动不了

    netstat -ano|findstr "443" 发现443端口被占 记录下443端口对应的PID 进入任务管理器,查看进程,发现为一个叫做vmware-hostd.exe的进 ...

  10. 动态规划——min/max的单调性优化总结

    一般形式: $max\{min(ax+by+c,dF(x)+eG(y)+f)\},其中F(x)和G(y)是单调函数.$ 或 $min\{max(ax+by+c,dF(x)+eG(y)+f)\},其中F ...