jQuery validate表单验证

html代码

 

<!--机构模态框-->
<div class="modal fade" id="brandModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 头部 标题 -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">增修品牌</h4>
            </div>
            <!--body  组成-->
            <div class="modal-body">
                <!-- 表单-->
                <form id="brandForm" class="form-horizontal" enctype="multipart/form-data">
                    <div class="input-group">
                        <!--编号id-->
                        <input type="hidden" name="id" id="id"/>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">名称</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" onkeyup="this.value=this.value.replace(/\s/g,'')" name="name" id="name" placeholder=""/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">说明</label>
                        <div class="col-sm-8">
                            <textarea name="introduce" rows="5" class="form-control" onkeyup="this.value=this.value.replace(/\s/g,'')" id="introduce" placeholder=""></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">图片</label>
                        <div class="col-sm-8">
                            <input type="file" class="uploadImg"  id="url"/>
                        </div>
                    </div>
                    <!--尾部-->
                    <div class="modal-footer">
                        <button id="submit" type="submit" class="btn btn-primary">保存</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

JS代码

$(function () {

//自定义规则
    jQuery.validator.addMethod("isNotEmpty", function (value, element) {
        value = value.replace(/\s/g,"");
        return this.optional(element) || value;
    }, "不能为空");
    //初始化 表单验证
    $("#brandForm").validate({
        rules: {
            //name 这里取的是页面name属性值
            name: {
                required: true,
                isNotEmpty: true
            },
            introduce: {
                isNotEmpty: true
            }
        },

        invalidHandler: function () {
            return false;
        },
        submitHandler: function () {
            var formData = new FormData($("#brandForm").get(0));
            $(".uploadImg").each(function () {
                if ($(this).get(0).files[0]) {
                    var oImg = new Image();
                    oImg.src = $(this).siblings("img").get(0).src;
                    var type = $(this).get(0).files[0].type;
                    if (oImg.complete) {
                        callBack(type);
                    } else {
                        oImg.onload = callBack(type);
                    }

                    function callBack(type) {
                        var data = compress(oImg);
                        formData.append("file", upload(data, type));
                    }
                }
            });
            if(!formData.get("id") && !formData.get("file")){
                toastr.error("图片不能为空");
                return false;
            }
            $.ajax({
                type: "post",
                url: "/product/brand/merge",
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                data: formData,
                success: function (result) {
                    if (result.success) {
                        toastr.success(result.module);
                        $('#brandModal').modal('hide');
                        $("#brandListTab").bootstrapTable("refresh");
                    } else {
                        toastr.error(result.errorMessage);
                    }
                },
                error: function (e) {
                    toastr.error(e.errorMessage);
                }
            });
        }

    });

}

//封装
$.fn.serializeObjectParameterItem = function() {
    var formData = {};
    //serializeArray() ;返回JSON 对象数组
    var formArray = this.serializeArray();
    for(var i = 0, n = formArray.length; i < n; ++i){
        formData[formArray[i].name] = formArray[i].value;
    }
    return formData;
};