0

此功能用于验证。如果它是空的，它会打印错误，并在文本框旁边显示红色或绿色以及 OK 消息。

JavaScript

 function validatebox()
 {
     var fn = document.geElementById("fn").value;
     if (fn==null || fn=="")
     {
         document.geElementById("error_fn").innerHTML="please fill your first name";
         document.geElementById("error_fn").style.color="red";
     }
     else
     {
         document.geElementById("error_fn").innerHTML="OK";
         document.geElementById("error_fn").style.color="green";
     }

我正在尝试在文本框旁边显示错误消息，但它不起作用。

HTML

 <form  name="signup" action="singup_i" method="post">
   First name:
   <input type="text" id="fn" onblur="validatebox()" name="fn"  size="15"/> 
   <label id="error_fn"></label>
   <input type="submit" value="submit"> <input type="reset" value="reset">
 </from>
4

2 回答 2

7

三个问题：

  1. 它是getElementById（注意t），而不是geElementById。

  2. 您缺少}功能的结尾。

  3. 表单的结束标签是</from>, 不是</form>

您的浏览器可能至少会告诉您前两个：在所有现代浏览器中，都有一整套开发/调试工具。对于 IE 和 Chrome（至少），只需按 F12。对于其他人，请查看菜单。

修复这些，它就可以工作了：Live Copy | 直播源

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Example</title>
</head>
<body>
 <form  name="signup" action="singup_i" method="post">
First name:<input type="text" id="fn" onblur="validatebox()" name="fn"  size="15"/> 
              <label id="error_fn"></label>
         <input type="submit" value="submit"> <input type="reset" value="reset">
</from>
<script>
function validatebox() {

    var fn = document.getElementById("fn").value;
    if (fn == null || fn == "") {
        document.getElementById("error_fn").innerHTML = "please fill your first name";
        document.getElementById("error_fn").style.color = "red";
    }
    else {
        document.getElementById("error_fn").innerHTML = "OK";
        document.getElementById("error_fn").style.color = "green";
    }
}
</script>
</body>
</html>

请注意，我已经重新格式化了函数代码，所以更容易看到块（因此看到结尾}）。

error_fn但是我可以建议不要重复查找，并且不要将label元素用于标记字段以外的其他内容：Live Copy | 直播源

<form  name="signup" action="singup_i" method="post">
 First name:<input type="text" id="fn" onblur="validatebox()" name="fn"  size="15"/> 
               <span id="error_fn"></span>
          <input type="submit" value="submit"> <input type="reset" value="reset">
</form>
<script>
function validatebox() {

    var fn = document.getElementById("fn").value;
    var err = document.getElementById("error_fn");
    if (fn == null || fn == "") {
        err.innerHTML = "please fill your first name";
        err.style.color = "red";
    }
    else {
        err.innerHTML = "OK";
        err.style.color = "green";
    }
}
</script>

最后，fn将永远不会null，因为value文本字段的属性永远不会是null; 它总是一个字符串。该字符串可能为空。在这种情况下，最简单的测试就是if (!fn) { /* missing */ } else { /* present */}，它将测试fn它是否是null, undefined, 0, "", false, 或NaN（其中，它只能是""，因为又value总是一个字符串）。当然，" "（一个空格）会过去的。

于 2013-07-23T14:00:07.870 回答
0

很多错误：

getElementbyId not geElementbyId
form not from
End your input with /

于 2013-07-23T14:15:51.313 回答