为什么javascript IF/ELSE不'；你不能正常工作吗？

我是JavaScript新手，我想在注册表上进行用户名验证。我不知道我的代码出了什么问题，但我认为“IF-ELSE”语句有问题

$(document).ready(function() {
  $("#usernameErrorMsg").hide();
  var usernameLength = $("#username").length;
  $("#username").focusout(function() {
    checkUser();
  });
  function checkUser() {
    if (usernameLength < 5 || usernameLength > 20) {
      $("#usernameErrorMsg").show();
    } else {
      $("#usernameErrorMsg").hide();
    }
  }
});

$（文档）.ready（函数（）{
$（“#usernameErrorMsg”）.hide（）；
var usernameLength=$（“#username”）.length；
$（“#用户名”）.focusout（函数（）{
checkUser（）；
});
函数checkUser（）{
如果（usernameLength<5 | | usernameLength>20）{
$（“#usernameErrorMsg”）.show（）；
}否则{
$（“#usernameErrorMsg”）.hide（）；
}
}
});

---

我希望当我输入超过5个字符直到20个字符时，usernameErrorMsg将消失。实际结果，无论我输入了多少个字符，错误消息都会不断出现。

usernameLength

只计算了一次，然后才运行

checkUser（）

。每次都应该在回调中重新计算它的值；否则，对该值的更改在回调中将不可见

此外，如果要检查输入中测试的长度，则需要检查

$（“#用户名”）.val（）.length

，而不是

$（“#用户名”）.length

：

function checkUser(){
  var usernameLength = $("#username").val().length;
  if (usernameLength < 5 || usernameLength > 20){
    $("#usernameErrorMsg").show();
  } else {
    $("#usernameErrorMsg").hide();
  }
}

函数checkUser（）{
var usernameLength=$（“#username”）.val（）.length；
如果（usernameLength<5 | | usernameLength>20）{
$（“#usernameErrorMsg”）.show（）；
}否则{
$（“#usernameErrorMsg”）.hide（）；
}
}

usernameLength

在运行

checkUser（）

之前只计算一次。每次都应该在回调中重新计算它的值；否则，对该值的更改在回调中将不可见

此外，如果要检查输入中测试的长度，则需要检查

$（“#用户名”）.val（）.length

，而不是

$（“#用户名”）.length

：

function checkUser(){
  var usernameLength = $("#username").val().length;
  if (usernameLength < 5 || usernameLength > 20){
    $("#usernameErrorMsg").show();
  } else {
    $("#usernameErrorMsg").hide();
  }
}

函数checkUser（）{
var usernameLength=$（“#username”）.val（）.length；
如果（usernameLength<5 | | usernameLength>20）{
$（“#usernameErrorMsg”）.show（）；
}否则{
$（“#usernameErrorMsg”）.hide（）；
}
}

试试这个

$（文档）.ready（函数（）{
$（“#usernameErrorMsg”）.hide（）；
$（“#用户名”）.focusout（函数（）{
checkUser（）；
});
函数checkUser（）{
用户名长度=$（“#用户名”）.length；
如果（usernameLength<5 | | usernameLength>20）{
$（“#usernameErrorMsg”）.show（）；
}
否则{
$（“#usernameErrorMsg”）.hide（）；
}
}
});

试试这个

$（文档）.ready（函数（）{
$（“#usernameErrorMsg”）.hide（）；
$（“#用户名”）.focusout（函数（）{
checkUser（）；
});
函数checkUser（）{
用户名长度=$（“#用户名”）.length；
如果（usernameLength<5 | | usernameLength>20）{
$（“#usernameErrorMsg”）.show（）；
}
否则{
$（“#usernameErrorMsg”）.hide（）；
}
}
});

$（“#用户名”）。长度

不是字段中字符的长度。它是从查询返回的JQuery包装集中的元素数量。由于只有一个元素的

id

为

username

，因此长度始终为

1

，并且您的

if

条件始终为

true

您需要做的是在字段中获取值的长度：

$（“#用户名”）.val（）.length

您还需要将获取值的行移动到

focusout

事件处理程序中，以便始终使用最新的数据

最后，让一个函数只调用另一个函数没有多大意义，因此可以将

checkUser

函数与事件回调结合起来，简化代码

$（文档）.ready（函数（）{
$（“#usernameErrorMsg”）.hide（）；
var username=$（“#username”）；//只查找一次元素
$（“#用户名”）.focusout（函数（）{
//每次用户离开该字段时，获取当前
//输入字段中的字符数
var usernameLength=username.val（）.length；
//请参见JQuery查询的长度与
//结果中第一个元素的值的长度？
log（username.length，usernameLength）；
如果（usernameLength<5 | | usernameLength>20）{
$（“#usernameErrorMsg”）.show（）；
}否则{
$（“#usernameErrorMsg”）.hide（）；
}
});
});

输入您的姓名：
错误
$（“#用户名”）。长度
不是字段中字符的长度。它是从查询返回的JQuery包装集中的元素数量。由于只有一个元素的
id
为
username
，因此长度始终为
1
，并且您的
if
条件始终为
true

您需要做的是在字段中获取值的长度：

$（“#用户名”）.val（）.length

您还需要将获取值的行移动到
focusout
事件处理程序中，以便始终使用最新的数据

最后，让一个函数只调用另一个函数没有多大意义，因此可以将
checkUser
函数与事件回调结合起来，简化代码


$（文档）.ready（函数（）{
$（“#usernameErrorMsg”）.hide（）；
var username=$（“#username”）；//只查找一次元素
$（“#用户名”）.focusout（函数（）{
//每次用户离开该字段时，获取当前
//输入字段中的字符数
var usernameLength=username.val（）.length；
//请参见JQuery查询的长度与
//结果中第一个元素的值的长度？
log（username.length，usernameLength）；
如果（usernameLength<5 | | usernameLength>20）{
$（“#usernameErrorMsg”）.show（）；
}否则{
$（“#usernameErrorMsg”）.hide（）；
}