如何同时验证多个输入字段

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>