Question

此功能用于验证。如果它是空的，它会打印错误，并在文本框旁边显示红色或绿色以及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>

Answer 1

三个问题：

getElementById（注意t），而非geElementById。
您错过了函数的结尾}。
表单的结束标记为</from>，而不是</form>

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

修复它们并且它有效：Live Copy | Live Source

<!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 | Live Source

<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，{{1} }，""或false（其中，它只能是NaN，因为""总是一个字符串）。当然，value（空格）会超过它。

Answer 2

许多错误：

getElementbyId not geElementbyId
形式不是来自使用/

结束输入

我试图在javascript中验证我的文本字段没有警报功能，但它不起作用

2 个答案: