javascript - 输入验证未检测到空值

Question

所以我有一个问题，当鼠标离开输入字段并且输入字段为空或少于 5 个字符时，我需要编写代码，它会输出一些内容

我试过将 .value 放在 getelementbyid 之后。请注意，我不能使用按钮来提交表单。

var username = document.getElementById('username');
var user_length = username.length;

username.onmouseout = function(){
    if(username == ""){
        alert('hi');
        // var username_value = 
        //document.getElementById("username_output");
        // username_value.innerHTML ="Please fill in your username!";
        // username_value.style.color = 'red';
    }

    else if(user_length < 5){
        alert('smaller than 5');
    }
    else{
        alert('else');
    }
};

每当鼠标离开时它应该输出一些东西。由于某种原因，它只出现在 else 语句中，而不出现在其他语句中

Answer 1

您正在将 input 本身(DOM 元素，document.getElementById('username') 的结果)与字符串进行比较，而不是输入的 值(value)。

你想要它的 value 属性:

if (username.value == "") {

但请注意，用户可能会键入一个空格，在这种情况下，上述内容将是错误的，因为 "" 不等于 ""。您可以使用 trim 来解决这个问题:

if (username.value.trim() == "") {

由于空字符串是假的¹，您还可以节省一些输入:

if (!username.value.trim()) {

---

¹ "falsy"- 任何在用作 bool 值时强制为 false 的 JavaScript 值都称为 falsy 值。伪值是 0、""、NaN、null、undefined、当然，false；所有其他值都是真实的。