如何同時驗證多個輸入字段

Question

我正在嘗試驗證文件類型，因此只能以我的形式提交JPG或PNG。 我已對其進行了設置，以便在“更改圖片上傳字段”時彈出警報並隱藏“上傳”按鈕。 但是，我有5個字段，如果在另一個框中選擇了正確的文件類型，則即使在另一個字段中仍然選擇了錯誤的文件類型，也會顯示該按鈕。 如果文件類型錯誤，如何在觸發警報的同時清除輸入字段？

我已經嘗試過this.value =“”; 在更改類和警報之間，但我不確定清除當前框的正確語法

  function validate(fName){ splitName = fName.split("."); fileType = splitName[1]; fileType = fileType.toLowerCase(); if (fileType != 'jpg' && fileType != 'jpeg' && fileType != 'png'){ document.getElementById("uploadbutton").className = "hide"; alert("You must select a .jpg or .png, file."); } else { document.getElementById("uploadbutton").className = "fwdbutton upload"; } } 

  <div id="upload"> <h2>If possible, please could you include photographs of the following:</h2> <p><label for='uploaded_file1'>Current boiler:</label> <input type="file" name="uploaded_file1" id="uploaded_file1" class="uploadfields" accept="image/png, image/jpg, image/jpeg" onChange="validate(this.value)"><a href="#" class="clearfile" id="clear1">X</a></p> <p><label for='uploaded_file2'>Gas meter:</label> <input type="file" name="uploaded_file2" id="uploaded_file2" class="uploadfields" accept="image/png, image/jpg, image/jpeg" onChange="validate(this.value)"><a href="#" class="clearfile" id="clear2">X</a></p> <p><label for='uploaded_file3'>Boiler pipe work:</label> <input type="file" name="uploaded_file3" id="uploaded_file3" class="uploadfields" accept="image/png, image/jpg, image/jpeg"onChange="validate(this.value)"><a href="#" class="clearfile" id="clear3">X</a></p> <p><label for='uploaded_file4'>Outside flue:</label> <input type="file" name="uploaded_file4" id="uploaded_file4" class="uploadfields" accept="image/png, image/jpg, image/jpeg"onChange="validate(this.value)"><a href="#" class="clearfile" id="clear4">X</a></p> <p><label for='uploaded_file5'>Anything else relevant:</label> <input type="file" name="uploaded_file5" id="uploaded_file5" class="uploadfields" accept="image/png, image/jpg, image/jpeg" onChange="validate(this.value)"><a href="#" class="clearfile" id="clear5">X</a></p><br /> <input class="backbutton showmoved" type="button" value="<< back" /> <input class="fwdbutton upload" id="uploadbutton" type="button" value="upload >>" /> <p><a class="nophotos" id="nophotos">I have no photos &gt;&gt;</a></p> </div> 

非常感謝您的建議，海倫

Answer 1

請嘗試這個。

  var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"]; function ValidateSingleInput(oInput) { if (oInput.type == "file") { var sFileName = oInput.value; if (sFileName.length > 0) { var blnValid = false; for (var j = 0; j < _validFileExtensions.length; j++) { var sCurExtension = _validFileExtensions[j]; if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) { blnValid = true; break; } } if (!blnValid) { alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", ")); oInput.value = ""; return false; } } } return true; } 

  File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br /> File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br /> File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br /> 

Answer 2

您可以使用以下正則表達式來檢查文件是否有效。

/\.(jpe*g|png)$/gi

然后，您可以使用test()方法在if語句中檢查文件是否有效。

if(/\.(jpe?g|png)$/gi.test(s)) {
  //TODO
}

Answer 3

使用計數器來查看是否還有更多錯誤：

var counter= 0;
function validate(fName){

    splitName = fName.split(".");
    fileType = splitName[1];
    fileType = fileType.toLowerCase();
    if (fileType != 'jpg' &&  fileType != 'jpeg' && fileType != 'png'){
      alert("You must select a .jpg or .png, file.");
      counter = counter + 1;
    }
    if (counter !=0){
        document.getElementById("uploadbutton").className = "hide";
    }else{
        document.getElementById("uploadbutton").className = "fwdbutton upload";
    }
}

每次運行該功能時，它將檢查您是否有錯誤。 否則，此代碼為示例，如果您修復了先前標記的錯誤，該代碼將無法處理。

我的建議是重新設計代碼，以在單擊按鈕時檢查每個輸入，並觸發提交警報。 而不是這樣做會使事情變得過於復雜。 因此，使該按鈕始終可見，並在上載按鈕上運行該函數，然后單擊

Answer 4

希望這會幫助你。 最初，當所有有效文件都被選中時，“上載”按鈕將被隱藏，您將看到“上載”按鈕，任何無效的類型都會給您警報。

  var isValid = [0]; var sumTotal=0; function validate(fileNo){ var files = event.target.files; var filetype = files[0].type; if (filetype == 'image/jpeg' || filetype == 'image/jpeg' || filetype == 'image/png'){ isValid[fileNo]=1; }else{ alert("You must select a .jpg or .png, file."); isValid[fileNo]=0; } sumTotal = isValid.reduce(function(a, b) { return a + b; }, 0); if(sumTotal==5){ document.getElementById("uploadbutton").style.display="block"; }else{ document.getElementById("uploadbutton").style.display="none"; } } 

 <div id="upload"> <h2>If possible, please could you include photographs of the following:</h2> <p><label for='uploaded_file1'>Current boiler:</label> <input type="file" name="uploaded_file1" id="uploaded_file1" class="uploadfields" onChange="validate(1)"><a href="#" class="clearfile" id="clear1">X</a></p> <p><label for='uploaded_file2'>Gas meter:</label> <input type="file" name="uploaded_file2" id="uploaded_file2" class="uploadfields" onChange="validate(2)"><a href="#" class="clearfile" id="clear2">X</a></p> <p><label for='uploaded_file3'>Boiler pipe work:</label> <input type="file" name="uploaded_file3" id="uploaded_file3" class="uploadfields" onChange="validate(3)"><a href="#" class="clearfile" id="clear3">X</a></p> <p><label for='uploaded_file4'>Outside flue:</label> <input type="file" name="uploaded_file4" id="uploaded_file4" class="uploadfields" onChange="validate(4)"><a href="#" class="clearfile" id="clear4">X</a></p> <p><label for='uploaded_file5'>Anything else relevant:</label> <input type="file" name="uploaded_file5" id="uploaded_file5" class="uploadfields" onChange="validate(5)"><a href="#" class="clearfile" id="clear5">X</a></p><br /> <input class="backbutton showmoved" type="button" value="<< back" /> <input class="fwdbutton upload" style="display: none;" id="uploadbutton" type="button" value="upload >>" /> <p><a class="nophotos" id="nophotos">I have no photos &gt;&gt;</a></p> </div>