在实践中，我会在这里做两件事之一。为 jQuery Validation 插件编写自定义适配器或编写自定义 jQuery 插件。
我通常使用jQuery validation，因此我会根据需要编写自定义适配器。这是有益的，因为一旦编写完成，我就可以反复重用规则，并且可以通过更改 Html 元素的属性来配置它们。它还具有动态显示错误消息和禁用表单提交的好处，而无需我的交互。
这是一个使用 Jquery Validation 的工作示例：
$(document).ready(function() {
$.validator.addMethod("filecount", function(value, element, params) {
var maxcount = params;
if (maxcount) {
return $(element)[0].files.length <= Number(maxcount);
}
return true;
}, "Maximum number of files exceeded");
$.validator.addMethod("filename", function(value, element, params) {
if (!params) return true;
var names = params.split(',');
var files = $(element)[0].files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (names.indexOf(file.name.toLowerCase()) == -1) return false;
}
return true;
}, "File name is not allowed");
var mb = 1048576;
var defaultmaxfilesize = mb * 15;
$.validator.addMethod("filesize", function(value, element, params) {
var el = $(element);
var parsedmaxval = parseInt(el.attr("data-val-filesize-max"));
var maxval = null;
if (isNaN(parsedmaxval) || parsedmaxval < 1 || parsedmaxval > 1048576000) {
maxval = defaultmaxfilesize;
} else {
maxval = parsedmaxval;
}
var files = el[0].files;
if (files != null && files.length > 0) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var size = file.size;
if (maxval < Number(size)) return false;
}
}
return true;
}, "File is too large");
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$('input[type="file"]').change(function() {
var el = $(this);
if (!el.valid()) el.val('');
});
});
</script>
</head>
<body>
<form id="form1" name="form1" action="/root" method="Post">
<div>
<input type=file
ID="flufileUpload"
multiple
data-msg-filename="File name must be '120.jpg, 150.jpg, 180.jpg, 210.jpg, or 240.jpg'"
data-rule-filename="120.jpg,150.jpg,180.jpg,210.jpg,240.jpg"
data-msg-filesize="Maximum File Size is 15 MB"
data-rule-filesize="15728640"
data-msg-filecount="You can only upload 5 files"
data-rule-filecount="5" />
</div>
<div>
<input type=file
ID="flufileUpload2"
name="flufileUpload2"
multiple
data-msg-filename="File name must be '480.jpg, 640.jpg, or 1024.jpg'"
data-rule-filename="480.jpg,640.jpg,1024.jpg"
data-msg-filesize="Maximum File Size is 10 MB"
data-rule-filesize="10485760"
data-msg-filecount="You can only upload 5 files"
data-rule-filecount="5" />
</div>
</form>
</body>
</html>
在 MVC 中工作时，我使用 jQuery Unobtrusive Validation 适配器，它的 api 略有不同，对于这个问题，可能看起来像这样：
$.validator.unobtrusive.adapters.add("filecount", ["filecount"], function (options) {
options.rules["filecount"] = "#" + options.params.param;
options.messages["filecount"] = options.message;
});
$.validator.addMethod("filecount", function (value, element, params) {
var maxcount = $(element).attr("data-val-filecount-max");
if (maxcount) {
return $(element)[0].files.length <= Number(maxcount);
}
return true;
});
$.validator.unobtrusive.adapters.add("filenames", ["filename"], function (options) {
options.rules["filename"] = "#" + options.params.param;
options.messages["filename"] = options.message;
});
$.validator.addMethod("filename", function (value, element, params) {
var names = $(element).attr("data-val-filename-allowed").split(',');
var files = $(element)[0].files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (names.indexOf(file.name.toLowerCase()) == -1) return false;
}
return true;
});
var mb = 1048576;
var defaultmaxfilesize = mb * 15;
$.validator.unobtrusive.adapters.add("filesize", ["filesize"], function (options) {
options.rules["filesize"] = "#" + options.params.param;
options.messages["filesize"] = options.message;
});
$.validator.addMethod("filesize", function (value, element, params) {
var el = $(element);
var parsedmaxval = parseInt(el.attr("data-val-filesize-max"));
var maxval = null;
if (isNaN(parsedmaxval) || parsedmaxval < 1 || parsedmaxval > 1048576000) {
maxval = defaultmaxfilesize;
} else {
maxval = parsedmaxval;
}
var files = el[0].files;
if (files != null && files.length > 0) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var size = file.size;
if (maxval < size) return false;
}
}
return true;
});
然后我可以根据需要使用验证属性来装饰我的元素：
<input
type=file
ID="flufileUpload"
multiple data-val-filename="File name must be '120.jpg, 150.jpg, 180.jpg, 210.jpg, or 240.jpg'"
data-val-filename-allowed="120.jpg,150.jpg,180.jpg,210.jpg,240.jpg"
data-val-filesize="Maximum File Size is 15 MB"
data-val-filesize-max="15728640"
data-val-filecount="You can only upload 5 files"
data-val-filecount-max="5"
/>
为不同的元素使用不同的值只是改变属性的问题：
<input
type=file
ID="flufileUpload"
multiple data-val-filename="File name must be '480.jpg, 640.jpg, or 1024.jpg'"
data-val-filename-allowed="480.jpg,640.jpg,1024.jpg"
data-val-filesize="Maximum File Size is 10 MB"
data-val-filesize-max="10485760"
/>
我会采取的另一种方法是创建一个自定义 jQuery 插件。这允许通过将选项传递给插件来配置自定义功能。我通常只在需要自定义功能时才采用这种方法，例如在文件通过 AJAX 验证后自动上传文件，或者需要对错误消息进行精细控制。
一旦编写好您的插件，就可以根据需要使用自定义选项调用，如下所示：
<script>
$(document).ready(function () {
$('#flufileUpload').fileValidate({ maxcount: 5, allowedFileNames: "file1.html,file2.html,file3.html" });
});
</script>
自定义插件看起来像这样，但通常您会将插件 JavaScript 放在自己的文件中，以便您可以根据需要重用它：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#qrcode {
width: 160px;
height: 160px;
margin-top: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
(function ($) {
$.fn.fileValidate = function (options) {
var Container = $(this);
var id = Container.attr("id");
var mb = 1048576;
var settings = $.extend({
maxfilesize: mb * 15,
allowMultiple: true,
allowedFileNames: null,
allowedExtensions: ".png,.gif,tif,.tiff,.jpg,.jpeg,.bmp,.pdf",
maxcount: -1,
documentRemoveCallback: null,
target: null,
errlab: null
}, options);
var getErrorLabel = function () {
var validator = $('span[data-val-msgfor="' + id + "']");
if (validator.length == 0) {
validator = $("<span/>");
validator.attr("data-val-msgfor", id);
Container.parent().append(validator);
}
return validator;
}
var formatBytes = function formatBytes(bytes, decimals) {
if (bytes == 0) return '0 Bytes';
var k = 1024,
dm = decimals + 1 || 3,
sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
};
var validExtensions = (settings.allowedExtensions) ? settings.allowedExtensions.split(",") : [];
var validFileNames = (settings.allowedFileNames) ? settings.allowedFileNames.split(",") : [];
var errlab = settings.errlab || getErrorLabel();
var hasError = false;
var errors = [];
var setError = function (s) {
errors.push(s);
}
var getErrorHtml = function () {
var ul = $("<ul>");
errors.forEach(function (err) { ul.append($("<li>").html(err)); });
return ul;
}
var validateSize = function (files) {
for (var i = 0; i < files.length; i++) {
if (files[i].size > settings.maxfilesize) return false;
}
return true;
}
var validateExenstions = function (files) {
var invalid = [];
for (var i = 0; i < files.length; i++) {
var file = files[i];
var parts = file.name.split(".");
var ext = parts[parts.length - 1].toLowerCase();
var found = false;
validExtensions.forEach(function (x) {
if (x == ext) found = true;
});
!found && invalid.indexOf(ext) == -1 && invalid.push(ext);
if (!found) return false;
}
return true;
}
var validateFileNames = function (files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (validFileNames.indexOf(file.name) == -1) return false;
}
return true;
}
var onDocumentChange = function () {
errors = [];
var el = Container[0];
errlab.html('');
var files = el.files;
settings.maxcount > 0 && files.length > settings.maxcount && setError("You may only select " + settings.maxcount + " file(s).");
validExtensions.length > 0 && !validateExenstions(files) && setError("File extensions must be '" + settings.allowedExtensions + "'.");
settings.maxfilesize > 0 && !validateSize(files) && setError("Maximum file size is " + formatBytes(settings.maxfilesize) + ".");
validFileNames.length > 0 && !validateFileNames(files) && setError("Files names must be one of the following: '" + settings.allowedFileNames + "'.");
errors.length > 0 && $(Container).val(''), errlab.html('').append(getErrorHtml());
if (settings.documentChangeCallBack) { window.setTimeout(settings.documentChangeCallBack, 1); }
};
Container.change(onDocumentChange);
};
}(jQuery));
</script>
</head>
<body>
<input type=file ID="flufileUpload" multiple />
<script>
</script>
<script>
$(document).ready(function () {
$('#flufileUpload').fileValidate({ maxcount: 5, allowedFileNames: "file1.html,file2.html,file3.html" });
});
</script>
</body>
</html>