Question

我一直在尝试不同的方法，并在许多不同的地方寻找，它看起来真的像以下代码应该工作。我很难过为什么它不...我是html和JavaScript的新手，所以我猜我一直在忽略我做错了什么？如果是这样，希望有人可以指出。非常感谢提前！

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
<!--
    function validateUsername() {
        if (document.getElementById("username") == "") {
           document.registrationform.username.style.background = 'Yellow';
        }
    }
//-->
</script>
</head>
<body>

<form name="registrationform" id="registrationform" method="post" action="register.php"> 

    <div class="formlabel">*Username:</div>
    <div class="formfield"><input type="text" name="username" id="username" size="30" onblur="validateUsername()"/></div>
    <div style="float:left;">
        <input type="submit" value="Submit" />
    </div>
</form>
</body>
</html>

当我把它留空并点击它时，它不会像我想的那样改变颜色。为什么呢？

Answer 1

document.getElementById("username")

应该是

document.getElementById("username").value

这应该让你开始。但是，您的实现不会捕获用户在文本框中输入空格（“”）的情况。为此，您将使用trim function来删除空格：

// Remove spaces at front/back of value in textbox
document.getElementById("username").value.trim();

Answer 2

如果从侦听器传递对元素的引用，则可以使生活更轻松：

<input type="text" ... onblur="validateUsername(this)">

现在你的职能是：

function validateUsername(element) {
    element.style.backgroundColor = (element.value == '')? 'yellow' : 'white';
}

Answer 3

你的代码有点乱。关闭“＆gt;”表格标签也缺失了。您的代码应如下所示。

    <html>
<head>
<script type="text/javascript">
<!--
function validateUsername() {
if (document.getElementById("username").value == "") {
document.registrationform.username.style.background = 'Yellow';
}
}
//-->
</script>
</head>
<body>

<form name="registrationform" id="registrationform" method="post" action="register.php">

<div class="formlabel">*Username:</div>
<div class="formfield"><input type="text" name="username" id="username" size="30" onblur="validateUsername()"/></div>
<div style="float:left;">
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>

JavaScript无法正常运行的客户端验证

3 个答案: