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

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";
    }
}

每次运行该功能时，它将检查您是否有错误。否则，此代码为示例，如果您修复了先前标记的错误，则无法处理。

我的建议是重新设计代码，以在单击按钮时检查每个输入，并触发提交警报。而不是这样做会使事情变得过于复杂。因此，使按钮始终可见，并在uploadButton单击上运行该功能

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>