我希望使用Jquery或Javascript在for循环和ASC命令的帮助下验证多个映像。

Question

我在使用jQuery或JavaScript进行图像验证时遇到了问题。

当我尝试的时候，请看下面的代码。

简报会

我想在for循环的帮助下验证多个图像。

问题(验证排序)

当我按submit按钮时，这段代码按DESC顺序对图像进行了验证(见下面的图像)，并且我想要ASC顺序，比如1 field is required...，然后是2 field is required等等。

代码：

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function imageValidation(){
    return_var = 'true';

    for(var i=1; i<4; i++){
        if(($('#player-'+i).val()) == ''){
            return_var = i+' field is required';
        }
    }
    alert(return_var);
    return false;

}   
</script>

<form onsubmit="return imageValidation()">
1 <input type="file" id="player-1" name="players[]" /><br />
2 <input type="file" id="player-2" name="players[]" /><br />
3 <input type="file" id="player-3" name="players[]" /><br />
<input type="submit" />
</form>

图像

​

​

Answer 1

我增加了新的代码行，当第一个条件匹配时，只添加break;。它会解决你的问题

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function imageValidation(){
    return_var = 'true';

    for(var i=1; i<4; i++){
        if(($('#player-'+i).val()) == ''){
            return_var = i+' field is required';
            break;// break immediately rather wait to complete the loop.
        }
    }
    alert(return_var);
    return false;

}   
</script>

<form onsubmit="return imageValidation()">
1 <input type="file" id="player-1" name="players[]" /><br />
2 <input type="file" id="player-2" name="players[]" /><br />
3 <input type="file" id="player-3" name="players[]" /><br />
<input type="submit" />
</form>

Answer 2

根据你的代码：

function imageValidation(){
    return_var = 'true';

    for(var i = 1; i < 4; i++){
        if(!$.trim( $('#player-'+i).val() )){
            return_var = i+' field is required';
            break;
        }
    }
    alert(return_var);
    return false;
}   

但有了jQuery

var return_var = 'true';
$('form input[id^=player]').each(function(index, el) {
  if(!$.trim( this.value)) {
    return_var += (index+1) + ' field is required'; // index is zero based
    break; // if you want to stop execution after invalid found
  }
});

所以你的函数看起来就像

function imageValidation(){

   var return_var = 'true';
    $('form input[id^=player]').each(function(index, el) {
      if(!$.trim( this.value)) {
        return_var = (index+1) + ' field is required'; // index is zero based
        break; // if you want to stop execution after invalid found
      }
    });
    alert(return_var);
    return false;
}