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方法不起作用。每当我提交时，页面都会重新加载。
还有一些方法作为附加组件提供，目前包含在下载包中的additional-methods.js中。并非所有这些都记录在这里：
- accept - 使文件上载仅接受指定的mime-types。
- creditcard - 使元素需要信用卡号。
- extension - 使元素需要特定的文件扩展名。
additional-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>您需要向表单元素添加action属性。否则它将重新加载页面。
除了“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>
jQuery（“。fancybox”）。fancybox（{padding：0，
openEffect : 'elastic',
openSpeed : 450,
closeEffect : 'elastic',
closeSpeed : 350,
closeClick : true,
helpers : {
title : {
type: 'inside'
},
overlay : {
css : {
'background' : 'rgba(0,0,0,0.8)'
}
}
}
});