Question

请您看一下这个演示，让我知道为什么我无法使用each迭代器检查空输入？

$('#test').on('click', function(e){
    e.preventDefault();
    $("input").each(function(){
        if($(this).val().length > 0){
            $(this).addClass('error');
        }
    });
});

.error{background-color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="upper">a</div>
<div class="lower">b</div>
<input type="text" id="txt1">
<div class="upper">7</div>
<div class="lower">w</div>
<input type="text" id="txt2">
<div class="upper">o</div>
<div class="lower">66</div>
<input type="text" id="txt3"><br />
<br />
<button id="test">Test</button>

Answer 1

尝试：

＆＃13;

$('#test').on('click', function(e){
    e.preventDefault();
    $("input").each(function(i,v){
       console.log($(v).val().length)
        if($(v).val().length == 0){
         
            $(v).addClass('error');
        }
    });
});

＆＃13;

.error{border-color:red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="upper">a</div>
<div class="lower">b</div>
<input type="text" id="txt1">
<div class="upper">7</div>
<div class="lower">w</div>
<input type="text" id="txt2">
<div class="upper">o</div>
<div class="lower">66</div>
<input type="text" id="txt3"><br />
<br />
<button id="test">Test</button>

＆＃13;

Answer 2

问题<input>处的

html元素没有value属性来返回.length？

尝试在value元素处设置input属性，以便在$(this).val()内检索this.value或.each();如果.toggelClass() .addClass()更改<，请"error"替换class在#test元素click事件处切换input .length / p>

$("#test").on("click", function(e) {
  e.preventDefault();
  $("input").each(function() {
    $(this).toggleClass("error", !this.value.length);
  });
});

.error {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="upper">a</div>
<div class="lower">b</div>
<input type="text" id="txt1" value="">
<div class="upper">7</div>
<div class="lower">w</div>
<input type="text" id="txt2" value="1">
<div class="upper">o</div>
<div class="lower">66</div>
<input type="text" id="txt3" value="">
<br />
<br />
<button id="test">Test</button>

Answer 3

我的代码没问题，一切都在运行。如果我在输入中填充了某些东西，那么它就会进入if子句。

但你想用“错误”做什么？从版本1.8开始，它已被弃用在你的编码中没有错误处理程序，你给一个字符串作为错误而不是处理程序（函数）的参数。阅读：https://api.jquery.com/error/

在你的情况下，最好将parent-element赋予每个函数，如：

$("input","body").each(

如果你想处理错误，那么：

$('#myelement').on('error',function(){ /*your error code */});

对于您的示例，如果要检查输入的值，则不是在input-element上绑定错误处理程序的正确方法。错误处理程序catch看起来像“未定义”但如果输入为空则不是系统错误。

尝试：

if($(this).val().length > 0){
    console.log('Input Val has ' + this).val().length + ' characters')
}

Answer 4

如果我正确理解了您的查询，您希望在单击“测试”按钮后突出显示空输入字段，而不应突出显示带有值的那些字段。如果是，请检查此解决方案：

$('#test').on('click', function(e){
    e.preventDefault();
    $("input").each(function(){
        if($(this).val().length == 0){
            $(this).addClass('error');
        }else{
          $(this).removeClass('error');
        }
    });
});

.error{background-color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="upper">a</div>
<div class="lower">b</div>
<input type="text" id="txt1">
<div class="upper">7</div>
<div class="lower">w</div>
<input type="text" id="txt2">
<div class="upper">o</div>
<div class="lower">66</div>
<input type="text" id="txt3"><br />
<br />
<button id="test">Test</button>

有多个输入验证使用每个（）的问题

4 个答案: