使用jQuery Validate时未上传非必填文件触发filesize错误问题

我一眼就看出问题出在你自定义的filesize验证方法上——它没考虑非必填项未上传文件的情况！当nic输入框没有选择文件时，element.files[0]是undefined，你直接访问它的size属性会触发JS错误，导致验证流程中断，还错误地抛出filesize提示。

修复方案 #

修改你的filesize验证方法，先判断是否有文件被选中，没有的话直接返回true（非必填项允许不上传，不需要验证大小）；只有当有文件时，再检查文件大小是否符合要求。同时我也帮你修正了原代码里的语法错误（比如addMethod未正确闭合、末尾多余的});）。

完整修复后的代码 #

$(document).ready(function() { 
    // 修复后的filesize验证方法
    $.validator.addMethod('filesize', function(value, element, arg) { 
        // 先判断是否有文件被选中
        if (element.files.length === 0) {
            return true; // 非必填项未上传文件时，直接通过验证
        }
        // 有文件时再检查大小
        return element.files[0].size <= arg; 
    }, "文件大小超出限制"); // 这里可以设置默认提示，也可以在messages里单独定义

    $("#Cnd_reg_form").validate({ 
        rules: { 
            passport: { 
                required: true, 
                extension: "docx|jpeg|png|doc|pdf", 
                filesize: 4000000 
            }, 
            license: { 
                required: true, 
                extension: "docx|jpeg|png|doc|pdf", 
                filesize: 2000000 
            }, 
            nic: { 
                required: false, 
                extension: "docx|jpeg|png|doc|pdf", 
                filesize: 2000000 
            } 
        }, 
        messages: { 
            passport: { 
                required: "Please upload your passport", 
                extension: "Please upload file with extension doc,pdf,jpeg,png", 
                filesize: "Please select file under 4MB" 
            }, 
            license: { 
                required: "Please upload your license", 
                extension: "Please upload file with extension doc,pdf,jpeg,png", 
                filesize: "Please select file under 2MB" 
            }, 
            nic: { 
                extension: "Please upload file with extension doc,pdf,jpeg,png", 
                filesize: "Please select file under 2MB" 
            } 
        }, 
        errorPlacement: function(error, element) { 
            error.appendTo(element.parent()); 
        } 
    }); 
});

关键修改说明 #

• 在filesize方法开头增加了element.files.length === 0的判断：对于非必填的文件输入框，用户没选文件时直接通过验证，不会再去访问element.files[0].size导致错误。
• 修正了原代码中$.validator.addMethod的语法错误（缺少闭合括号和分号），以及末尾多余的});。

这样修改后，不管你是否上传nic文件，验证流程都能正常执行：

• 上传nic文件时，会正常验证扩展名和大小；
• 不上传nic文件时，跳过filesize和required验证，直接通过。

内容的提问来源于stack exchange，提问作者Aqib Javed