验证简单表格

Question

正在学习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>

Answer 1

完整答案：

<!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功能在哪里？

使用function Validate(){和}包装var formsCollection ... END_OF_FOR_LOOP

验证简单表格

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-08-29 09:26:34

验证简单表格

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-08-29 09:26:34

解决方案1
1 已采纳 2017-08-29 09:26:34