好吧,请耐心等待,因为这件事相当复杂,不仅难以解释 - 我们正在尝试为文件上传提供“更友好”的客户端验证,确保他们尝试上传的文件中不存在任何非法字符(是的,我们也进行服务器端验证,但希望允许用户在尝试上传之前修复文件中的任何非法字符)。
我们还使用 Bootstrap 2.1.0 和 Jasny 的 Bootstrap 文件输入样式。我们有一个用于 jQuery Validate 的正则表达式,对于常规输入工作正常,但在这种情况下,验证会触发文件名中是否存在非法字符,并且验证消息未正确清除等。
这里有一个 fiddle 链接,可以更好地说明它:http://jsfiddle.net/4fu5S/2/
以下是附加方法的 JS:
$.validator.addMethod(
"regexdoc",
function (value, element) {
return this.optional(element) || !(/:|\^|\[|\]|\?|&|#|\\|\*|\'|\"|<|>|\||%/g.test(value));
},
"Document Names Cannot Contain Characters /, :, ?, \\, *, |, [, ], <, ', ^, #, &, or >.");
这是验证的 JS:
$("#frmUpload")
.validate({
debug: true,
errorPlacement: function (error, element) {
element.closest('.control-group')
.find('.help-block')
.html(error.text());
},
highlight: function (element, errorClass, validClass) {
$(element)
.closest('.control-group')
.removeClass('success')
.addClass('error');
},
unhighlight: function (element, errorClass, validClass) {
$(element)
.closest('.control-group')
.removeClass('error')
.addClass('success');
},
success: function (label) {
$(label)
.closest('form')
.find('.valid')
.removeClass("invalid");
},
rules: {
uploadFile1: {
required: true,
minlength: 4,
regexdoc: true
},
renameUploadDoc1: {
required: true,
minlength: 4,
maxlength: 45,
regexdoc: true
}
}
});
要重现我遇到的问题,请尝试以下操作(IE9+ 或 Chrome 33+):
首先,通过单击“选择文档”按钮选择一个文件。理想情况下,选择一个不包含非法字符的文件(以显示验证触发器,即使它不应该)。请注意,即使您的文件不应满足触发错误消息的条件,验证也会触发,即使该消息显示无论如何。
奇怪的是,第二个字段(自动填充文件输入中的文件名)以绿色突出显示,这意味着验证确实适用于该字段。如果您选择的文件确实包含非法字符,一旦您按 Tab 键移出字段或移动焦点,就会触发验证,让您知道它是不正确的。
注意:选择要上传的文件后应该会显示文件名,Jasny Boostrap 2.1.1 也是如此,但 2.3.0 是我们在 CDN 上可以找到的最低链接版本- 我认为这没有什么区别,因为无论文件名问题如何,它(验证)都不适用于 2.1.1 或 2.3.0。
奇怪的是它在 Firefox 27 中似乎工作正常,但 Chrome 33 和 IE9+ 似乎表现出相同的问题。非常感谢任何有关如何解决此问题的想法。
最佳答案
我认为我已经解决了问题,请检查我的代码。
问题出在文件上传字段上,有些浏览器出于安全原因添加了字符串“c:\fakepath\”,该路径在执行上传时会被忽略,但会用作字段值。如果您想验证文件名,您需要检查该路径是否已添加并在验证器函数中将其删除。
function (value, element) {
if (value.indexOf('C:\\fakepath\\') === 0)
value = value.substring('C:\\fakepath\\'.length)
return this.optional(element) || !(/:|\^|\[|\]|\?|&|#|\\|\*|\'|\"|<|>|\||%/g.test(value));
},
这篇文章解释了“fakepath”的工作原理:https://stackoverflow.com/a/18254337/661140
关于javascript - jQuery 验证插件、Bootstrap、Jasny Bootstrap 文件输入正则表达式 - 验证在 Firefox 中工作而不是在 Chrome/IE 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22387874/