8

我正在上传图像并尝试使用 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>

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

4

3 回答 3

26

你需要两件事。

(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>

这是jsfiddle 的链接。请注意，它包括debug: true防止在小提琴中发布表单。

于 2013-05-01T16:41:59.480 回答
6

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

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

$(document).ready(function(){

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

});
于 2013-05-02T03:32:12.423 回答
3

文档指出该规则accept仅接受 mime 类型作为参数。

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

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

于 2013-05-01T16:29:46.160 回答