jQuery验证插件，Bootstrap，Jasny Bootstrap文件输入正则表达式-验证在Firefox中有效不在Chrome/IE中 [英] jQuery Validate Plugin, Bootstrap, Jasny Bootstrap File Input RegEx - Validation Working in Firefox Not in Chrome/IE
问题描述
好吧，请忍受，因为这件事相当复杂，不仅要解释-我们正在尝试为文件上传提供更友好的"客户端验证，以确保他们尝试上传的文件中不存在任何非法字符(是的，我们也进行服务器端验证，但是希望允许用户在尝试上传之前修复文件中的任何非法字符).
OK, bear with me as this thing is fairly complicated not only to explain - We are trying to provide "friendlier" client-side validation for file uploads, ensuring that any illegal characters are not present in files they are attempting to upload (yes, we do server-side validation as well, but would like to allow the user to fix any illegal characters in files BEFORE attempting to upload).
我们还将Bootstrap 2.1.0和Jasny的文件输入样式用于Bootstrap.我们有一个RegEx for jQuery Validate可以很好地用于常规输入，但是在这种情况下，验证会触发文件名中是否存在非法字符，并且验证消息无法正确清除，等等.
We are also using Bootstrap 2.1.0, and Jasny's File Input styling for Bootstrap. We have a RegEx for jQuery Validate working fine for regular inputs, but in this case, the validation is triggering whether there is an illegal character in the filename or not, and the validation messages are not clearing properly, etc.
以下是Fiddle的链接，以更好地进行说明: http://jsfiddle.net/4fu5S/2 /
Here is a link to a Fiddle to illustrate it better: http://jsfiddle.net/4fu5S/2/
以下是用于其他方法的JS:
Here is the JS for the additional method:
$.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 +):
To reproduce the problem I'm having, please attempt the following (IE9+ or Chrome 33+):
-
首先，通过单击选择文档"按钮选择一个文件.理想情况下，选择一个不包含非法字符的文件(即使不是合法字符也要显示验证触发器).请注意，即使您的文件不符合critera来触发错误消息，即使消息无论显示如何，验证触发器也会触发.
First, choose a file by clicking the "Select Document" button. Ideally, choose a file that does NOT contain illegal characters (to show the validation triggers even though it should not). Notice the validation triggers even though your file should NOT meet the critera to trigger the error message, even though the message shows regardless.
奇怪的是，第二个字段(将使用文件输入中的文件名自动填充)以绿色突出显示，这意味着验证确实适用于该字段.如果您选择的文件中包含非法字符，则一旦您跳出字段或移动焦点，它就会触发验证，让您知道它是不正确的.
Oddly enough, the second field (which gets automatically populated with the filename from the file input) is highlighted in green, meaning the validation DOES work for that field. If you choose a file that does contain an illegal character, as soon as you tab out of field or move focus, it will trigger the validation, letting you know it is incorrect.
注意::文件名应该在选择要上传的文件后显示，并且与Jasny Boostrap 2.1.1兼容，但是2.3.0是我们在CDN上可以找到的最低链接版本到-我认为这没有什么区别，因为无论文件名有什么问题，它(验证)都不适用于2.1.1或2.3.0.
NOTE: the filename should be showing up after choosing a file to upload, and it does with Jasny Boostrap 2.1.1, but 2.3.0 was the lowest version we could find on CDN to link to - I don't think that makes a difference here since it (the validation) doesn't work with 2.1.1 OR 2.3.0 regardless of the filename issue.
奇怪的是，它似乎可以在Firefox 27中正常工作，但Chrome 33和IE9 +似乎也存在相同的问题.任何有关如何解决此问题的想法都将受到赞赏.
What is odd is it seems to work fine in Firefox 27, but Chrome 33 and IE9+ seem to exhibit the same issues. Any ideas about how to troubleshoot this are greatly appreciated.
推荐答案
我认为我已经解决了该问题，请检查我的代码.
I think that I've fixed the problem, please, check my code.
问题是文件上载字段，出于安全原因，某些浏览器添加了字符串"c:\ fakepath \"，执行上载时会忽略该路径，但会将其用作字段值.如果要验证文件名，则需要检查是否已添加该路径，然后在验证函数中将其删除.
The problem is the file upload field, some browsers add the string "c:\fakepath\" for security reasons, that path is ignored when the upload is performed, but is used as field value. If you want to verify the file name you need to check if that path is added and remove it in your validator 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
In this post is explained how the "fakepath" works: https://stackoverflow.com/a/18254337/661140
这篇关于jQuery验证插件，Bootstrap，Jasny Bootstrap文件输入正则表达式-验证在Firefox中有效不在Chrome/IE中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
