我正在尝试为文件上传设置验证。我已经在形式的其他输入中使用jQuery验证(在此不显示简单性(,所以我想继续使用此方法来保持一致性。
我正在努力使其工作起作用,因为文件输入中的名称字段具有用于上传多个附件的数组的括号。因此,我遇到了两个问题之一:
-
我在jQuery规则
uploadedFile[]
中放置了实际名称,然后我遇到了一个错误。 -
我取下括号并只有
uploadedFile
,但是此字段未识别,并且验证不起作用。
对我来说最合乎逻辑的事情是使用ID。我找不到基于我搜索的所有内容的好方法。
是否有一种方法可以使用uploadedFile[]
的ID运行此操作,或者有其他更有效的方法吗?
输入
<input type="file" name="uploadedFile[]" class="inputfile" id="uploadedFileTest" data-multiple-caption="{count} files selected" multiple>
JS
$('#shareProjectForm').validate({
ignore: [],
rules: {
uploadedFile: {
required: true,
extension: 'png|jpg|jpeg|pdf|gif'
}
},
messages: {
uploadedFile: {
required: "A file must be uploaded",
extension: "You must choose a file with one of the following formats: .png, .jpg, .jpeg, .pdf or .gif"
}
},
尝试以下:
$("#uploadedFileTest").change(function(){ $("#uploadedFileTest").blur().focus(); });
$.validator.addMethod(
"validate_file_type",
function(val,elem) {
var files = $('#'+elem.id)[0].files;
for(var i=0;i<files.length;i++){
var fname = files[i].name.toLowerCase();
var re = /(.pdf|.jpg|.jpeg)$/i;
if(!re.exec(fname))
{
return false;
}
}
return true;
},
"Please upload pdf or jog or jpeg files"
);
$('#form').validate({
rules: {
"uploadedFile[]": {
required: true,
validate_file_type: true,
}
},
messages: {
"uploadedFile[]": {
required: "A file must be uploaded",
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<form id="form">
<input type="file" name="uploadedFile[]" class="inputfile" id="uploadedFileTest" data-multiple-caption="{count} files selected" multiple>
<input type="submit" />
</form>