Как я могу объединить три функции в одну функцию для выполнения одной и той же функции?

Question

У меня есть код, который определяет тип файла (после загрузки пользователем) успешно, если эта функция была разделена на три отдельные функции (одна для 2 для фотографий и 1 для загрузки видео). На моих <input/> тегах у меня есть onchange="fileValidation()" на каждом соответствующем входе. Я пытаюсь объединить это в одну функцию, чтобы она выполняла вышеупомянутую успешную функциональность, когда она была разделена на три функции.

Я использую ваниль JS. Все на одной странице. Я предполагаю, что это просто не будет работать правильно, если три отдельных тега ввода имеют одинаковую функцию fileValidation(). Другими словами - если кто-то хочет загрузить видео, тогда другие два тега <input/> могут запутаться ... но я могу ошибаться?

Как я могу объединить все эти if() внутри одной функции, чтобы я снова мог работать так же, как если бы разделил на три функции? Код ниже для справки.

function fileValidation() {
const realFileBtn = document.getElementById("real-file");
const realFileW9 = document.getElementById("real-file-w9");
const realFileVideo = document.getElementById("real-file-video");

let filePathWinnerPhoto = realFileBtn.value;
let filePathW9 = realFileW9.value;
let filePathVideo = realFileVideo.value;

// Allowing file type
let allowedExtensionsWinnerPhoto = /(\.jpg|\.png|\.HEIC|\.JPEG|\.pdf)$/i;
let allowedExtensionsW9 = /(\.jpg|\.png|\.HEIC|\.JPEG|\.pdf)$/i;
let allowedExtensionsVideo = /(\.mp4|\.mov)$/i;

if (!allowedExtensionsWinnerPhoto.exec(filePathWinnerPhoto)) {
    alert('Invalid file type');
    realFileBtn.value = '';
    return false;
} else {
    console.log("file accepted");
    fileAcceptedFlag = true;
}

if (!allowedExtensionsW9.exec(filePathW9)) {
    alert('Invalid file type');
    realFileW9.value = '';
    return false;
} else {
    console.log("file accepted");
    fileAcceptedW9Flag = true;
}

if (!allowedExtensionsVideo.exec(filePathVideo)) {
    alert('Invalid file type');
    realFileVideo.value = '';
    return false;
} else {
    console.log("file accepted");
    fileAcceptedVideoFlag = true;
}

return fileAcceptedFlag || fileAcceptedW9Flag || fileAcceptedVideoFlag;

Answer 1

Приведенные ниже обновления включают в себя переменную ошибок, в которой хранятся ошибки и которые возвращаются только один раз в конце и предупреждают об ошибках, если они существуют. Для тестирования я ввел значения для имен файлов и закомментировал сброс введенных значений.

function fileValidation() {
const realFileBtn = document.getElementById("real-file");
const realFileW9 = document.getElementById("real-file-w9");
const realFileVideo = document.getElementById("real-file-video");

let filePathWinnerPhoto = "test.jp1g";
let filePathW9 = "test.jpxg";
let filePathVideo = "test.mov";

let imgreg = /(\.jpg|\.png|\.HEIC|\.JPEG|\.pdf)$/i;
let videoreg = /(\.mp4|\.mov)$/i;
let errors = [];

if(!imgreg.exec(filePathWinnerPhoto)){
   errors.push("Winner Photo is not valid");
   //realFileBtn.value = "";
}

if(!imgreg.exec(filePathW9)){
   errors.push("W9 Photo is not valid");
   //realFileW9.value = "";
}

if(!videoreg.exec(filePathVideo)){
   errors.push("Video is not valid");
   //realFileVideo.value = "";
}

if(errors.length > 0){
alert(errors.join("\n"));
}
return (errors.length == 0);
}
 fileValidation();