时间戳

首页 > 解决方案 > 输入验证未检测到空值

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

问题描述

所以我有一个问题，当鼠标离开输入字段并且输入字段为空或少于 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 语句中，而不是其他语句

标签： javascript

解决方案

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

你想要它的value属性：

if (username.value == "") {

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

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

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

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

¹ "falsy" - 任何false在用作布尔值时强制转换为的 JavaScript 值都称为假值。虚假值是0, "", NaN, null, undefined, 当然还有false; 所有其他值都是真实的。

推荐阅读