Javascript 简单表单的验证_Javascript

Javascript 简单表单的验证

javascript

Javascript 简单表单的验证,javascript,Javascript,在学习JS的过程中。尝试学习如何在整个表单中循环，并指出错误这是一个大杂烩，我从各种在线教程中拼凑而成很明显，它不起作用了我试图做的是获取表单的整个元素集合，并循环遍历它，以及任何空白的内容，将其错误消息打印在同一屏幕上的某个位置，无论是表单上方还是文本框下方这就是我目前所拥有的。有没有什么帮助可以让它发挥作用，或者至少是我概述的概念？如有可能，请提供简单易懂的解释 <!DOCTYPE HTML> <html> <head> <

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


名称

电子邮件


var formscolection=document.forms[0]；
对于（var i=0；i


编辑

函数验证（）{
var formscolection=document.forms[0]；
对于（var i=0；i
完整ans：
<!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>


名称

电子邮件


document.forms[0].onsubmit=function（）{
var form=document.forms[0]；
对于（var i=0；i


有几个问题
您的for循环使用中似乎没有i
如果（formscolection.elements.value.length==0）{
toif（formscolection.elements[i].value.length==0）{

您的验证
功能在哪里
使用函数Validate（）{
和}包装var formscolection…结束\u FOR_循环的\u
我按照您在编辑部分中的建议进行了更改…仍然不起作用…有什么想法吗？@user273072545345让我看看。请稍等。@user273072545345我花了15分钟才完成，最后终于成功了。请选择我作为正确答案并给我一个投票。谢谢。谢谢您花时间回答。回答h已被接受。尽管是一个简单的问题。有没有办法让所有空白字段立即显示，而不是按照此脚本一次显示一个？@user273072545345删除返回false。你能给我一个向上的投票吗？谢谢。
<!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>