jquery validation 在触发按钮单击事件进行表单校验和验证通过后发起ajax请求的解决方案

一、需求描述

页面提交表单,或传递参数,已经是第二个页面了,不能直接使用普通的submit()方式提交,表单而是使用click方式进行异步请求得到结果,因此使用Jq的validate进行验证

二、解决代码


//声明一个函数
function validform() {
return $(“#form-article-add”).validate({
rules : {
title : {
required : true,
minlength : 5,
maxlength : 50
},
sellpoint : {
required : true,
maxlength : 200
},
category : {
required : true
}

    },
    messages : {
        title : {
            required : "产品标题不能为空",
            minlength : "请输入5-50个字符的产品标题",
            maxlength : "请输入5-50个字符的产品标题"
        },
        sellpoint : {
            required : "商品卖点不能为空",
            maxlength : "卖点信息不能超过200个字符"
        },
        category : {
            required : "请选择商品分类"
        }
    }
});

}
//注册表单验证
/$(validform());/
//点击表单提交按钮触发单击事件,进行表单验证,验证通过发起ajax请求,验证不通过在表单里提示
$(“#subBtn”).click(function() {

if (validform().form()) {
    $.ajax({
        type : "POST",
        url : "/restful/page/product",
        data : $("#form-article-add").serialize(),
        success : function(msg) {
            layer.msg('新增商品成功!', {
                icon : 1,
                time : 1000
            });
        },
        error : function() {
            layer.msg('新增商品失败!', {
                icon : 2,
                time : 1000
            });
        }
    });
} else {
}

});

//文档加载完成后也进行表单校验,上面仅仅在单击事件触发后才进行
//如果是普通的表单提交,直接在文档加载完成后进行表单校验就可以了
/*$(function() {
validform();
})*/
“`

猜你喜欢

转载自blog.csdn.net/qq_33624952/article/details/82346874