我试图验证我的文本框没有提示功能在JavaScript中，但它不工作

问题描述

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

JavaScript

$ p $ 函数validatebox（）
{
var fn = document.geElementById（fn）.value;
if（fn == null || fn ==）
{
document.geElementById（error_fn）。innerHTML =请填写您的名字;
document.geElementById（error_fn）。style.color =red;
}
else
{
document.geElementById（error_fn）。innerHTML =OK;
document.geElementById（error_fn）。style.color =green;
}


我试图在文本框旁边显示错误消息，但它不工作。

HTML

 < form name =signupaction =singup_imethod =post> 
名字：
< input type =textid =fnonblur =validatebox（）name =fnsize =15/> 
< label id =error_fn>< / label> 
< input type =submitvalue =submit> < input type =resetvalue =reset> 
< / from> 
  

解决方案

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




2. 您错过了}




3. 您的结单标记为< / from>


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

   
   
   

   解决这些问题并且工作正常： |

    <！DOCTYPE html> 
   < html> 
   < head> 
   < meta charset = utf-8 /> 
   < title>示例< / title> 
   < / head> 
   < body> 
   < form name =signupaction =singup_imethod =post> 
   名字：< input type =textid =fnonblur =validatebox（）name =fnsize =15/> 
   < label id =error_fn>< / label> 
   < input type =submitvalue =submit> < input type =resetvalue =reset> 
   < / from> 
   < script> 
   函数validatebox（）{
    
    var fn = document.getElementById（fn）。value; 
    if（fn == null || fn ==）{
    document.getElementById（error_fn）。innerHTML =请填写您的名字; 
    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 重复使用，而不是使用标签元素来标记字段以外的内容： |

    < form name =signupaction =singup_imethod =post> 
   名字：< input type =textid =fnonblur =validatebox（）name =fnsize =15/> 
   < span id =error_fn>< / span> 
   < input type =submitvalue =submit> < input type =resetvalue =reset> 
   < / form> 
   < script> 
   函数validatebox（）{
    
    var fn = document.getElementById（fn）。value; 
    var err = document.getElementById（error_fn）; 
    if（fn == null || fn ==）{
    err.innerHTML =请填写您的名字; 
    err.style.color =red; 
   } 
    else {
    err.innerHTML =OK; 
    err.style.color =green; 
   } 
   } 
   < / script> 
     

   最后， fn 永远不会是 null ，因为文本字段的值属性永远不会是 null >;它总是一个字符串。该字符串可能是空白的。在这种情况下，最简单的测试只会是 if（！fn）{/ * missing * /} else {/ * present * /} ，它会测试 fn 查看它是否是 null ， undefined ， 0 ，， false 或 NaN （其中，它只能是，因为再次 value 始终是一个字符串）。当然，（空格）会超过这个值。

   
   

   This function is for validation. It prints am error if it's empty and shows either red or green along with an OK msg beside the text box.

   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";
        }
   

   I am trying to display the error message beside the text box but its not working.

   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>
   

   解决方案

   Three problems:

   1. It's getElementById (note the t), not geElementById.

   2. You're missing the ending } on your function.

   3. Your closing tag for the form is </from>, not </form>

   Your browser was probably telling you about at least the first two: In all modern browsers, there's a full set of development/debugging tools. For IE and Chrome (at least), just press F12. For others, look in the menus.

   Fix those and it works: 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>
   

   Note that I've reformatted the function code a bit, so it's easier to see the blocks (and therefore see the ending }).

   But can I suggest not looking up the error_fn repeatedly, and not using a label element for something other than labelling a field: 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>
   

   Finally, fn will never be null, because the value property of a text field will never be null; it's always a string. The string may be blank. In this case, the easiest test would just be if (!fn) { /* missing */ } else { /* present */}, which will test fn to see if it's null, undefined, 0, "", false, or NaN (of which, it can only be "", because again value is always a string). Of course, " " (a space) would get past that.

   这篇关于我试图验证我的文本框没有提示功能在JavaScript中，但它不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！