Javascript多个警报框

时间:2017-09-22 19:31:26

标签: javascript

我在HTML中创建了一个小注册表单。

我创建了一个JS,如果其中任何一个留空,就会弹出一个警告

现在我想将所有警报组合到一个警报中,例如在开始时会出现一个包含所有警报的框,如果您按下提交完成一个警告,则下一个框将显示,而不会显示您已完成框的警告

这是我的JS代码:



function validate()
      {

         if( document.inrValid.Nume.value == "" )
         {
            alert( "Introduceti va rog numele!" );
            document.inrValid.Nume.focus() ;
            return false;
         }

if( document.inrValid.Prenume.value == "" )
         {
            alert( "Introduceti va rog Prenumele!" );
            document.inrValid.Prenume.focus() ;
            return false;
         }

         if( document.inrValid.EMail.value == "" )
         {
            alert( "Introduceti va rog Emailul!" );
            document.inrValid.EMail.focus() ;
            return false;
         }

         if( document.inrValid.Telefon.value == "" )
         {
            alert( "Introduceti va rog Numarul de Telefon!" );
            document.inrValid.Telefon.focus() ;
            return false;
         }

if( document.inrValid.parola.value == "" )
         {
            alert( "Introduceti va rog Parola!" );
            document.inrValid.parola.focus() ;
            return false;
         }

         return( true );
      }

<!DOCTYPE html>
<html>
   <head>
      <title></title>
   </head>
   <body>
      <form action="/cgi-bin/test.cgi" name="inrValid" onsubmit="return(validate());">
        <p>Nume <input type="text" name="Nume" /></p>
              <p>Prenume <input type="text" name="Prenume" /></p>
              <p>EMail <input type="text" name="EMail" /></p>
              <p>Telefon <input type="number" name="Telefon" /></p>
              <p>Parola <input type="password" name="parola" /></p>
               <p><input type="submit" onclick="clickAlert()" value="Submit" name="clickAlert" /></p>
      </form>
      <script src="script.js">  </script>
   </body>
</html
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

如评论中所述,您可以使用required属性作为一种小型验证。

您还可以将所有错误消息添加到数组中,例如:

var checkForm = function () {
  var foo = document.getElementById('foo');
  var bar = document.getElementById('bar');
  var errors = [];
  
  if (foo.value.length === 0) {
    errors.push('Foo is blank');
  }
  
  if (bar.value.length === 0) {
    errors.push('Bar is blank');
  }
  
  alert(errors.join(','));
};
<form onsubmit="checkForm()">
  <input id="foo" type="text" />
  <input id="bar" type="text" />
  <input type="submit" />
</form>