jQuery Validate插件，Bootstrap，Jasny Bootstrap文件输入RegEx – validation在Firefox中工作不在Chrome / IE中
好吧，请耐心等待，因为这个事情相当复杂，不仅仅是为了解释 – 我们正在尝试为文件上传提供“友好”的客户端validation，确保他们试图上传的文件中不存在任何非法字符（是的，我们也进行服务器端validation，但是希望允许用户在尝试上传之前修复文件中的任何非法字符。
我们还使用Bootstrap 2.1.0和Jasny的Bootstrap文件输入样式。 我们有一个用于jQuery Validate的RegEx适用于常规输入，但在这种情况下，validation是触发文件名中是否存在非法字符，并且validation消息未正确清除等。
这是一个小提琴的链接，以更好地说明它： http ： //jsfiddle.net/4fu5S/2/
这是附加方法的JS：
$.validator.addMethod( "regexdoc", function (value, element) { return this.optional(element) || !(/:|\^|\[|\]|\?|&|#|\\|\*|\'|\"||\||%/g.test(value)); }, "Document Names Cannot Contain Characters /, :, ?, \\, *, |, [, ], ."); 这是validation的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+）：
-
首先，单击“选择文档”按钮选择文件。 理想情况下，选择一个不包含非法字符的文件（即使它不应该显示validation触发器）。 请注意validation触发器即使您的文件不符合critera以触发错误消息，即使消息显示无关。
-
奇怪的是，第二个字段（从文件输入中自动填充文件名）以绿色突出显示，这意味着validationDOES适用于该字段。 如果您选择包含非法字符的文件，只要您跳出字段或移动焦点，它就会触发validation，让您知道它是不正确的。
注意：文件名应该在选择要上传的文件后显示，并且它与Jasny Boostrap 2.1.1一起显示，但2.3.0是我们可以在CDN上找到的最低版本链接到 – 我不认为这是一个这里的差异，因为它（validation）不适用于2.1.1或2.3.0，无论文件名问题。
奇怪的是它似乎在Firefox 27中运行良好，但Chrome 33和IE9 +似乎表现出同样的问题。 任何关于如何解决这个问题的想法都非常感谢。
我想我已经解决了这个问题，请检查我的代码。
问题是文件上载字段，一些浏览器出于安全原因添加字符串“c：\ fakepath \”，执行上载时忽略该路径，但用作字段值。 如果要validation文件名，则需要检查是否添加了该路径，并在validation器function中将其删除。
function (value, element) { if (value.indexOf('C:\\fakepath\\') === 0) value = value.substring('C:\\fakepath\\'.length) return this.optional(element) || !(/:|\^|\[|\]|\?|&|#|\\|\*|\'|\"|<|>|\||%/g.test(value)); },
在这篇文章中解释了“假路径”的工作原理： https ： //stackoverflow.com/a/18254337/661140
罗伯托是对的：问题是假路径。
但我会将您的代码更改为此（基于您的代码获取fileUpload1 onChange的文件名）：
function (value, element) { return this.optional(element) || !(/:|\^|\[|\]|\?|&|#|\\|\*|\'|\"|<|>|\||%/g.test(value.split('\\').pop())); }, "Document Names Cannot Contain Characters /, :, ?, \\, *, |, [, ], <, ', ^, #, &, or >.");