jQuery 验证 - 需要工作但不接受答案

【问题标题】：jQuery validation - required working but accept notjQuery 验证 - 需要工作但不接受
【发布时间】：2013-04-25 16:29:33
【问题描述】：

我正在上传一张图片并尝试使用 jquery 对其进行验证。这是我的代码：

<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

<script type='text/javascript'>
$(document).ready(function(){
    $("#form").validate({
        errorLabelContainer: "#message_box", wrapper: "li",

        rules: {
            image: {required: true, accept: "jpg|jpeg|png|gif"}
        },
        messages: {
            image: {required: 'Required!', accept: 'Not an image!'}
        }
    })
});
</script>

必需的工作 - 如果我没有插入图像，我会收到错误。但是接受不起作用（我插入的任何内容都通过了），我不知道为什么。有任何想法吗？ :)

【问题讨论】：

你不需要 jQuery..好像你正在使用 99.9% 的代码你不需要做一个简单的测试来查看一个字段是否是“必需的”以及文件类型是否有效..就这样做。此外，您还可以使用 JS 检查文件是否是实际图像 - stackoverflow.com/q/71944/104380 也可以阅读：stackoverflow.com/q/181214/104380

标签： jquery jquery-validate

【解决方案1】：

documentation 声明 accept 规则仅接受 mime 类型作为参数。

如果您想接受所有图片，请使用image/*。

如果您只想接受特定的图像类型，则可以通过用逗号分隔多个 mime 类型来指定它们，例如image/pjpeg,image/jpeg,image/png,image/gif.

【讨论】：

【解决方案2】：

你需要两件事。

(1) 使用有效的语法来使用accept 方法，因为它要求您使用以提供逗号分隔的mimetypes 列表。

$(document).ready(function(){
    $("#form").validate({
        errorLabelContainer: "#message_box", wrapper: "li",

        rules: {
            image: {required: true, accept: "image/jpg,image/jpeg,image/png,image/gif"}
        },
        messages: {
            image: {required: 'Required!', accept: 'Not an image!'}
        }
    })
});

(2) 您必须包含additional-methods.js，因为核心验证插件中不包含accept 方法。因此，在包含验证插件后将以下内容添加到您的 <head>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>

这里是 link to jsfiddle。请注意，它包含debug: true 以防止在小提琴中发布表单。

【讨论】：

这个答案没有错。但是，最简单的解决方法是将accept 更改为extension。请参阅extension 规则。
jquery 验证错误“>”...感谢您的回答，我收到此错误...

【解决方案3】：

1) 如前所述，您需要包含additional-methods.js 文件。

2) 对于文件扩展名，使用the extension rule。 accept 规则适用于 mime 类型。

$(document).ready(function(){

    $("#form").validate({
        errorLabelContainer: "#message_box", wrapper: "li",
        rules: {
            image: {
                required: true,
                extension: "jpg|jpeg|png|gif"
            }
        },
        ...
    })

});

【讨论】：