验证简单表格

学习JS的过程。试图学习如何遍历整个表单，并指出错误。验证简单表格

这是我从各种教程在线拼凑起来的大杂烩。

显然这不起作用。

我想要做的是获取窗体的元素的整个集合，并通过它循环，以及任何空白的东西，以便将其错误消息打印在同一屏幕上的某处，将其置于窗体之上或在文本框本身之下。

这是我到目前为止。任何帮助实现这一目标的工作，或者至少是我概述的概念？如果可能，简单和一口大小的解释将不胜感激。

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
    </head> 
    <body> 
     <form method="post" action="" id="myForm"> 
     <div id="validation"></div> 
     <p><label>Name<br><input type="text" name="Name"></label></p> 
     <p><label>Email<br><input type="text" name="Email"></label></p> 
     <p><input type="submit" value="Submit"></p> 
     </form> 
     <script> 
     var formsCollection = document.forms[0]; 
     for (var i = 0; i < formsCollection.elements.length; i++) { 
      if (formsCollection.elements.value.length == 0) { 
       form.elements.input.border = "1px solid red"; 
       form.Name.style.backgroundColor = "#FFCCCC"; 
      } 
      return true; 
     } 
     document.getElementById("myForm").onsubmit = function() { 
      return Validate(this); 
     }; 
     </script> 
    </body> 
</html>

编辑

<script> 
    function Validate() { 
    var formsCollection = document.forms[0]; 
    for (var i = 0; i < formsCollection.elements.length; i++) { 
     if (formsCollection.elements[i].value.length == 0) { 
      form.elements.input.border = "1px solid red"; 
      form.Name.style.backgroundColor = "#FFCCCC"; 
     } 
     return true; 
    } 
    document.getElementById("myForm").onsubmit = function() { 
     return Validate(this); 
    }; 
} 
    </script>

来源

2017-08-29 user273072545345

全部答：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
    </head> 
    <body> 
    <form method="post" action="" id="myForm"> 
    <div id="validation"></div> 
    <p><label>Name<br><input type="text" name="Name"></label></p> 
    <p><label>Email<br><input type="text" name="Email"></label></p> 
    <p><input type="submit" value="Submit"></p> 
    </form> 

<script> 
document.forms[0].onsubmit= function() { 
    var form = document.forms[0]; 
    for (var i = 0; i < form.elements.length; i++) { 
     if (form.elements[i].value.length == 0) { 
       console.log(form.elements[i]); 
      form.elements[i].border = "1px solid red"; 
      form.elements[i].style.backgroundColor = "#FFCCCC"; 
      return false; 
     } 
    } 
} 
</script> 
    </body> 
</html>

几个问题。

您的for循环使用似乎没有i。

尝试if (formsCollection.elements.value.length == 0) { 到if (formsCollection.elements[i].value.length == 0) {

哪里是你的Validate功能？

裹var formsCollection ... END_OF_FOR_LOOP与function Validate(){和}

来源

2017-08-29 09:26:34 Turtle

我把在变化如你所说的'EDIT'部分......仍然没有工作...任何想法，为什么？ – user273072545345

@ user273072545345让我看看。请等待。 – Turtle

@ user273072545345我需要15分钟才能完成它，并最终生效。 Plz选择我作为正确的答案，并给我一个upvote。谢谢。 – Turtle

验证简单表格

回答

相关问题