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

时间:2012-07-09 02:05:32

标签: javascript javascript-events validation

我一直在尝试不同的方法,并在许多不同的地方寻找,它看起来真的像以下代码应该工作。我很难过为什么它不...我是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>

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

3 个答案:

答案 0 :(得分:2)

document.getElementById("username")

应该是

document.getElementById("username").value

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

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

答案 1 :(得分:0)

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

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

现在你的职能是:

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

答案 2 :(得分:0)

你的代码有点乱。关闭“&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>