Jquery每个事件

Question

我正在尝试验证一个登录表单。我接受一个div的子元素，并迭代所有输入元素。当焦点移到密码字段时，所有工作的fine.But都会转到密码字段，如果我删除了用户名的所有值，它就不会给出所需的错误。我的代码

<div class="login-contents">
    <input type="text" name="name" class="form-control login-check" id="login-name" placeholder="Username">
    <input type="password" name="pass" class="form-control login-check" id="login-pass" placeholder="Password">
</div>

<div id="login-error" class="alert alert-danger"></div> 

和Jquery

$(document).ready(function(){
    $("#login-form").prop("disabled",true);
    $("#login-error").removeClass("alert alert-danger");
    var name_min_length = 2;
    var pass_min_length = 5 ;

$(".login-contents").children('input').each(function(){
    $(".login-check").keyup(function(){
        var name = $("#login-name").val();
        name = jQuery.trim(name).length;
        var name_length = length_check(name,name_min_length);
        console.log(name_length);

        var pass = $("#login-pass").val();
        pass = jQuery.trim(pass).length;
        var pass_length = length_check(pass,pass_min_length);
        console.log(pass_length);
    });
});


function length_check(value,number){
    if (value < number) {
        $("#login-error").addClass("alert alert-danger").html("Minimum length");
    }
    else{
        $("#login-error").removeClass("alert alert-danger").html("");
        return true ;
    }
}
});

有什么建议我做错了

Answer 1

一切似乎都是正确的，您只需要改变您的逻辑，就像使用更少的代码一样：

不需要.each循环--在这种情况下--您可以使用类选择器.login-check访问代码中的this (当前元素在其中触发keyup )！

$(".login-check").keyup(function(){
        var name = $(this).val();
        var elemType = $(this).attr('name')
        name = jQuery.trim(name).length;
        var length = length_check(name, elemType == 'name' ? name_min_length : pass_min_length); // if element is name length will be 2 otherwise 5 for pass
        console.log(length);
    });

Demo

Answer 2

首先要知道的是，您不必通过循环输入来注册事件，类选择器将为您完成这一任务，并且您可以在一个函数中处理length_check。尝尝这个

//$(".login-contents").children('input').each(function(){
$(".login-check").keyup(function(){
    var value = trim(this.value).length;
    if(this.name == "name"){
      var result = length_check(value,name_min_length); 
    } else(this.name == "pass") {
       var result = length_check(value,pass_min_length); 
    }
    console.log(result);

});
//});

Answer 3

这是因为您使用相同的div和代码来显示名称和密码字段的错误。密码字段是最后检查的，所以无论哪个值有名称字段，它都不会显示错误。以下是工作代码：

​

$(document).ready(function() {
  $("#login-form").prop("disabled", true);
  $("#login-error").removeClass("alert alert-danger");
  var name_min_length = 2;
  var pass_min_length = 5;

  $(".login-contents").children('input').each(function() {
    $(".login-check").keyup(function() {
      var name = $("#login-name").val();
      name = jQuery.trim(name).length;
      var name_length_ok = length_check(name, name_min_length);
      console.log(name_length_ok);

      var pass = $("#login-pass").val();
      pass = jQuery.trim(pass).length;
      var pass_length_ok = length_check(pass, pass_min_length);
      console.log(pass_length_ok);
      
      toggle_error(!name_length_ok || !pass_length_ok);
    });
  });

  function length_check(value, number) {
    return value >= number;
  }
  
  function toggle_error(toggle) {
    if (toggle) {
      $("#login-error").addClass("alert alert-danger").html("Minimum length");
    } else {
      $("#login-error").removeClass("alert alert-danger").html("");
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="login-contents">
    <input type="text" name="name" class="form-control login-check" id="login-name" placeholder="Username">
    <input type="password" name="pass" class="form-control login-check" id="login-pass" placeholder="Password">
</div>

<div id="login-error" class="alert alert-danger"></div>

​