input.length检查工作不

Question

我尝试执行以下代码：

<div class="clear"id="usernameline">username:<input type="text" name="username" id="username" style="border:1px solid #928b8b;"> (at least 3 character)</div> 
<div id="usercheck"></div> 
<input style="cursor:pointer;border:1px solid #ffffff;background:#c0c0c0;color:#484848" type="button" class="form_button" id="register" value="register!"> 

<script> 
    var error1 = '<span style="color:#ff0000">please fill in your username</span>'; 
    var error2 = '<span style="color:#ff0000">please insert at least 3 character</span>'; 
    $("#register").click(function() { 
     if ($("#username").val() == '') { 
      $("#usercheck").show(); 
      $("#usercheck").html(error1); 
     } else if ($("#username").val() != '') { 
      var user = $("#username").val(); 
      if (user.length <= 3) { 

       $("#usercheck").html(error2); 

      } else { 

       $("#usercheck").hide(); 
      } 
     } 
    });  
</script> 

当我点击注册按钮，如果在输入框中的值长度大于3，$("#usercheck").hide()不叫，任何人都可以告诉我我的代码有什么问题，任何帮助将不胜感激。

Answer 1

您需要通过添加再次显示：

$("#usercheck").show(); 

if (user.length <= 3) {后，否则会被隐藏起来。

编辑：

我花时间清理一些代码，所以逻辑更加清晰：

<script> 
    var error = $("#usercheck"); 
    var username = $("#username"); 
    var error1 = '<span style="color:#ff0000">please fill in your username</span>'; 
    var error2 = '<span style="color:#ff0000">please insert at least 3 character</span>'; 
    $("#register").click(function() { 
     if (username.val() == '') { 
      error.show(); 
      error.html(error1); 
     } else if (username.val().length <= 3) { 
      error.show(); 
      error.html(error2); 
     } else { 
      error.hide(); 
     } 
    }); 
</script>