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

I am trying to validate my textfield without alert function in javascript but it's not working

本文关键字：有警 功能 不起作用 It javascript 验证 字段 文本 我的      更新时间：2023-09-26

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

三个问题：

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

  2. 您的函数中缺少结尾}。

  3. 表单的结束标签是</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、""、false还是NaN（其中，它只能是""，因为value始终是字符串）。当然，" "（一个空间）会超过这个范围。

许多错误：

getElementbyId不是geElementbyId
表单不是来自
使用/

结束输入
相关文章：