如果输入类型=“文件”=文件被选中，如何返回“有效”？

Question

使用jQuery和jquery validate plugin我的形式。

如果input_17的内容为length > 1，则需要选择文件input_1_67。这样可行。现在

 input_17: { 
     required: function(element) { 
      return $("#input_1_67").val().length > 1 
     } 
    } 

，如果用户选择一个文件，我想回到一个“有效”类的input_17。任何想法如何我可以得到这个类？并且：我只想添加这个类别，只有如果

$("#input_1_67").val().length > 1 

并选择一个文件。

Answer 1

如果您正在使用jQuery插件验证，那么你不应该有任何类添加到您的输入，验证这是否适合你。

据我所知，浏览器不会让你读文件的路径，或将其设置为此事。你将能够得到的唯一的东西是文件名。这是一项安全限制，可防止未经授权的文件访问。您可以通过获取值来获取文件名。一旦你有了这个，你可以对文件类型做进一步的验证（但在客户端不可靠）。如果您想自定义规则添加到验证检查的文件类型，那么你可以这样做：

jQuery.validator.addMethod("filetype", function(value, element) { 
    var types = ['jpeg', 'png', 'gif'], 
     ext = value.replace(/.*[.]/, '').toLowerCase(); 

    if (types.indexOf(ext) !== -1) { 
     return true; 
    } 
    return false; 
}, 'Insert invalid message here'); 

为了使略高于更可重复使用，取文件类型的数组出功能，并通过他们作为函数的一个参数。请参阅此链接：http://docs.jquery.com/Plugins/Validation/Validator/addMethod#namemethodmessage

其次，当你点击一个文件输入或点击“浏览”按钮，文件对话框打开。所以在输入中唯一应该是文件名。

在这些假设下，该字段的有效性可以是一个简单的检查，看看是否有是有，这是你已经在做的事情。

Answer 2

你可以简单地绑定change事件所需的输入，即：

$('#input_1_67').change(function(){ 
    $(this).addClass('valid'); 
}); 

Answer 3

$('#input_1_67').change(function(){ 
    if($("#input_1_67").val().length > 1) 
     $("#input_17").addClass('valid'); 
    else 
     $("#input_17").removeClass('valid'); 
    } 
}); 

此外，如果你正在使用jQuery的验证，你可能想尝试

$('#input_1_67').change(function(){ 
    $("#input_17").valid(); 
}); 

这将会触发验证器方法（因为input_17的有效性取决于input_1_67，所以只要input_1_67发生​​变化就应该验证），并且插件会自动设置css类。