javascript - javascript 验证。我在这里做错了什么？

Question

我是 JS 新手，我正在尝试在这里进行最简单的验证，但我无法让它工作：/ 基本上当我按下提交时，我想要表单下方 div 中的错误文本或 php 文件中的回显文本。它出什么问题了？我真的不知道我做错了什么请帮忙

<form name="myform" id="myform" method="post" action="echo.php">
<label for="username">User Name:</label><br />
<input type="text" id="username" name="username" /><br />
<label for="password">Password</label><br />
<input type="text" name="password" /><br />
<input type="submit" id="submit" value="Send">
</form>
<div id="errorMessages"></div>

和JS代码：

window.onload = function(){
validateForm();
}

function validateForm(){

document.getElementById("myform").onsubmit = function(){

    if (document.getElementById("username") == ""){
        document.getElementById("errorMessages").innerHTML = "ERROR";
        return false;
        }
    else return true;
};
}

Answer 1

document.getElementById("username")是一个 DOM 元素。
只要元素存在，它就永远不会模糊相等""。

您可能想要.value，它返回文本框的值。

Answer 2

if (document.getElementById("username").value){
    document.getElementById("errorMessages").innerHTML = "ERROR";
    return false;
}
else { 
    return true;
}

注意document.getElementById返回页面上找到的 DOM 元素的实例。所以使用该.value属性。此外，您实际上不需要在 JavaScript 中将字符串与空字符串进行比较，因此摆脱== "".

Answer 3

这是正确的js：

window.onload = function(){
validateForm();
}

function validateForm(){

document.getElementById("myform").onsubmit = function(){

    if (document.getElementById("username").value == ""){
        document.getElementById("errorMessages").innerHTML = "ERROR";
        return false;
        }
    else return true;
};
}

在 document.getElementById("username") 之后缺少一个“.value”