jQuery validate(submitHandler函数)验证通过发送Ajax(实例详解)

 更新时间:2022年10月12日 14:40:47   作者:微笑Tears  
这篇文章主要介绍了jQuery validate(submitHandler函数)验证通过发送Ajax,可以用validate框架验证元素,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

js代码:

$(function() {
    $('#form').validate({
        onkeyup : false,
        rules : {
            oldPassword:{
                required:true,
                remote : {
                    url : global.context + '/admin/password/duplicate',
                    data : {
                        oldPassword : function() {
                            return $('#oldPassword').val();
                        }
                    }
                }
            },
            password : {
                required : true,
                minlength : 6
            },
            repeat : {
                required : true,
                minlength : 6,
                equalTo:'#password'
            }
        },
        messages : {
            oldPassword:{
                required:'请输入原密码',
                remote : '请输入正确的原密码'
            },
            password : {
                required : '请输入密码',
                minlength : '长度需大于6'
            },
            repeat : {
                required : '请确认密码',
                equalTo : '两次输入密码不一致',
                minlength : '长度需大于6'
            }
        },
        submitHandler:function(form){
            var password = $('#password').val();
            var repeat = $('#repeat').val();
            $.ajax({
                url : global.context + '/admin/password',
                type : 'put',
                contentType : "application/json; charset=utf-8",
                data : JSON.stringify({
                    password : password,
                    repeat : repeat
                }),
                success : function(data) {
                    console.log(data);
                    if(data.status=='success'){
                        alert("修改密码成功");
                    }
                }
            });
        }
    });
});

个人感觉比较好用,可以用validate框架验证元素。

JQuery的submitHandler

之前做表单验证,有设置submitHandler

submitHandler: function(){

$("form").submit();

}

这样表单验证通过后会自动提交。。。。

改为

submitHandler: function(form){

form.submit();

}

否则,button按钮提交表单之后,表单会提交两次,前端造成stack 溢出

到此这篇关于Jquery validate(submitHandler函数)验证通过发送Ajax的文章就介绍到这了,更多相关Jquery validate验证内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!

相关文章

  • Jquery中map函数的用法

    Jquery中map函数的用法

    这篇文章主要介绍了Jquery中map函数的用法的相关资料,map()这个函数可以用在不同的地方,非常实用,感兴趣的朋友参考下吧
    2016-06-06
  • jquery插件制作 表单验证实现代码

    jquery插件制作 表单验证实现代码

    今天的内容是关于表单验证插件的制作。表单验证控件实现的主要功能是,当表单提交的时候检查必填项是否正确填写,同时根据需要验证输入信息是否符合规范
    2012-08-08
  • 『jQuery』名称冲突使用noConflict方法解决

    『jQuery』名称冲突使用noConflict方法解决

    jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号,这样就会发生名称冲突,使用名为 noConflict() 的方法来解决该问题
    2013-04-04
  • 使用jQuery的将桌面应用程序引入浏览器

    使用jQuery的将桌面应用程序引入浏览器

    jQuery 逐渐从其他 JavaScript 库选择中脱颖而出,并且成为 Web 开发人员的最佳选择。它迅速成为希望简化客户端开发和快速高效地创建富 Internet 应用程序(RIA)的程序员的首选。
    2010-11-11
  • jQuery滑动到底部加载下一页数据的实例代码

    jQuery滑动到底部加载下一页数据的实例代码

    这篇文章主要介绍了jQuery滑动到底部加载下一页数据的实例代码,需要的朋友可以参考下
    2017-05-05
  • jQuery实现菜单的显示和隐藏功能示例

    jQuery实现菜单的显示和隐藏功能示例

    这篇文章主要介绍了jQuery实现菜单的显示和隐藏功能,结合实例形式分析了jQuery基于事件响应及css方法动态改变菜单样式的相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • jQuery实现可以编辑的表格实例详解【附demo源码下载】

    jQuery实现可以编辑的表格实例详解【附demo源码下载】

    这篇文章主要介绍了jQuery实现可以编辑的表格,涉及jQuery响应鼠标事件动态操作页面元素的相关技巧,需要的朋友可以参考下
    2016-07-07
  • jQuery复制节点用法示例(clone方法)

    jQuery复制节点用法示例(clone方法)

    这篇文章主要介绍了jQuery复制节点的方法,结合实例形式分析了clone方法复制节点及appendTo方法追加节点的相关操作技巧,需要的朋友可以参考下
    2016-09-09
  • jQuery实现滑动开关效果

    jQuery实现滑动开关效果

    这篇文章主要为大家详细介绍了jQuery实现滑动开关效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • jquery点击展示与隐藏更多内容

    jquery点击展示与隐藏更多内容

    这篇文章主要为大家详细介绍了jquery点击展示与隐藏更多内容的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论

?


http://www.vxiaotou.com