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

来自documentation

作为附加组件提供了更多方法，目前包含   在下载包中的additional-methods.js 中。并非所有人都是   记录在这里：


accept - 使文件上传仅接受指定的mime-types。

creditcard - 使元素需要信用卡号。

扩展程序 - 使元素需要特定的文件扩展名。

additional-methods.js在这里 - ＆gt; https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/additional-methods.js

并在添加之后，它可以正常工作

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

除了“http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/additional-methods.js”之外，您还需要添加“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)'
        }
    }
}

}）;

Jquery文件验证

4 个答案: