Jquery 文件验证

Question

HTML形式：

<form id="add">
            <label>Song:</label>
            <input type="text" name="song" class="form-control"><br>
            <label>Upload Mp3:</label>
            <input type="file" name="file" class="form-control"><br>
            <input type="submit" class="btn btn-default" value="Add">
</form>

jQuery 验证：

$("#add").validate({
    rules: {
        song: {
            required:true,
            },
           file: { 
                required: false,
                extension: "mp3|mpeg|mp4"
            }, 
        },
    });

extension 方法无效。每当我提交时，页面都会重新加载。

Answer 1

您需要向表单元素添加一个动作属性。否则它将重新加载页面。

Answer 2

来自documentation

Some more methods are provided as add-ons, and are currently included in additional-methods.js in the download package. Not all of them are documented here:

accept – Makes a file upload accept only specified mime-types.

creditcard – Makes the element require a credit card number.

extension – Makes the element require a certain file extension.

附加的-methods.js在这里 -> https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/additional-methods.js

添加后效果很好

$("#add").validate({
    rules: {
        song: {
            required: true,
        },
        file: {
            required: false,
            extension: "mp3|mpeg|mp4"
        },
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/additional-methods.js"></script>

<form id="add" enctype="multipart/form-data">
    <label>Song:</label>
    <input type="text" name="song" class="form-control">
    <br>
    <label>Upload Mp3:</label>
    <input type="file" name="file" class="form-control">
    <br>
    <input type="submit" class="btn btn-default" value="Add">
</form>

Answer 3

您需要添加“http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/additional-methods.js" file in addition to "http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.js”才能使此代码正常工作。

这是代码，运行良好：

    <script>
        $(document).ready(function(){


        $("#add").validate({
        rules:
        {
            song: {
            required:true
            },
           image: {
                required: false,
                extension: "mp3|mpeg|mp4"
            }, 
        },
});

        });
    </script>
</head>
<body>
<form id="add">
        <label>Song:</label>
        <input type="text" name="song" class="form-control"><br>
        <label>Upload Mp3:</label>
        <input type="file" name="image" class="form-control"><br>
        <input type="submit" class="btn btn-default" value="Add">
</form>
</body>
</html>

Answer 4

jQuery(".fancybox").fancybox({ 填充：0，

openEffect : 'elastic',
openSpeed  : 450,

closeEffect : 'elastic',
closeSpeed  : 350,

closeClick : true,
helpers : {
    title : { 
        type: 'inside' 
    },
    overlay : {
        css : {
            'background' : 'rgba(0,0,0,0.8)'
        }
    }
}

});

Answer 5

jQuery 验证插件默认没有 extension 方法，你必须添加 additional-methods.js.

或者，您也可以使用额外的自定义功能来完成它。请看下面的例子。

$.validator.addMethod("validateFile", function(value, element) {
    var fileExtension = ['mp3', 'mpeg', 'mp4'];
    return ($.inArray(value.split('.').pop().toLowerCase(), fileExtension) != -1)
}, "Please select a valid file(MP3, MPEG and MP4 are allowed)");


$("#add").validate({
    rules: {
        song: {
            required: true,
            validateFile: true
        },
        file: {
            required: true
        },
    },
})

上传正确文件后隐藏错误消息。（可选）

$('body form').on("keyup paste change focusout", "input,textarea", function() {
    if ($(this).hasClass("error") || $(this).hasClass("valid"))
        $(this).valid();
});

Jquery 文件验证

Jquery file validation

jquery

jquery-validate