jQuery验证插件,Bootstrap, jQuery Bootstrap文件输入RegEx -验证工作在Firefo
jQuery Validate Plugin, Bootstrap, Jasny Bootstrap File Input RegEx - Validation Working in Firefox Not in Chrome/IE
好的,请原谅我,因为这件事相当复杂,不仅要解释-我们正试图为文件上传提供"友好"的客户端验证,确保他们试图上传的文件中不存在任何非法字符(是的,我们也做服务器端验证,但希望允许用户在尝试上传之前修复文件中的任何非法字符)。
我们也使用Bootstrap 2.1.0,和Jasny的文件输入样式的Bootstrap。我们有一个用于jQuery Validate的RegEx,用于正常输入,但在这种情况下,验证会触发文件名中是否存在非法字符,并且验证消息没有正确清除,等等。
这里是一个小提琴的链接,以更好地说明: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 >.");
下面是Validate的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+):
首先,点击"选择文件"按钮选择一个文件。理想情况下,选择一个不包含非法字符的文件(以显示验证触发器,即使它不应该)。注意验证触发,即使您的文件不应该满足触发错误消息的标准,即使消息显示,
奇怪的是,第二个字段(从文件输入中自动填充文件名)以绿色突出显示,这意味着验证确实适用于该字段。如果您选择的文件确实包含非法字符,只要您将制表符移出字段或移动焦点,它就会触发验证,让您知道它是不正确的。
注意:文件名应该在选择要上传的文件后显示,并且它与Jasny Boostrap 2.1.1一起使用,但2.3.0是我们可以在CDN上找到的最低版本链接-我不认为这有什么区别,因为它(验证)不适合2.1.1或2.3.0,无论文件名问题。
奇怪的是,它似乎在Firefox 27中工作良好,但Chrome 33和IE9+似乎表现出同样的问题。如果您对如何解决这个问题有任何想法,我将不胜感激。
我想我已经解决了这个问题,请检查我的代码。
http://jsfiddle.net/4fu5S/5/问题是文件上传字段,一些浏览器出于安全原因添加了字符串"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
Roberto是对的:问题出在假路径上。
但是我会把你的代码改成这样(根据你的代码来获取fileUpload1 onChange的文件名):
function (value, element) {
return this.optional(element) || !(/:|'^|'[|']|'?|&|#|''|'*|''|'"|<|>|'||%/g.test(value.split('''').pop()));
},
"Document Names Cannot Contain Characters /, :, ?, '', *, |, [, ], <, ', ^, #, &, or >.");
- jQuery - Bootstrap Datepicker onChange issue
- jQuery Bootstrap Password Meter is not working
- Jquery Bootstrap Dropdown在PHP中使用foreach循环填充的表中不起作用
- jQuery bootstrap UI 选项卡不适用于 fullCalendar
- 从上下文菜单打开 JQuery/Bootstrap 对话框
- Jquery Bootstrap在单击时显示和隐藏跨度
- Appending rows Jquery/Bootstrap
- jQuery Bootstrap适用于Firefox,但不适用于IE10
- 不止一个下拉菜单扰乱了jQuery/Bootstrap函数
- jQuery/Bootstrap弹出窗口,将费用添加到运行费用计算器中
- JQuery Bootstrap selectpicker on('change') set selec
- 将脚本从1.7.1迁移到1.9 jQuery(Bootstrap 3)
- jQuery / Bootstrap: Child DIV打开父模式
- Jquery + Bootstrap Modal,打开另一个模态内部…为什么
- ES6+jQuery+Bootstrap-未捕获引用错误:未定义jQuery
- 在现有的基于jquery/bootstrap的网站中嵌入AngularJS
- jQuery/Bootstrap作品集只适用于桌面模式
- 不能动态加载jquery, bootstrap, D3.js, knockout.js的CDN
- JQuery Bootstrap Multiselect动态绑定事件处理器
- 我怎样才能锁上'在jQuery/Bootstrap/JS的登录屏幕后面的页面