1. 首頁
  2. 問答
  3. 表單驗證警報

表單驗證警報

2017-10-15 93 views
1

我寫了一個表單驗證，但如果我們填寫錯誤的所有字段，警報將不會用於所有字段。 請檢查我的檔案並告訴我該怎麼做。 我的意思是，如果我們希望在出現一個錯誤後看到錯誤，那麼當我填充所有錯誤時，我們應該如何處理它，只是錯誤地填寫錯誤的第一個字段。表單驗證警報

<!doctype html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <title>Form Validation</title> 
 
\t </head> 
 

 
\t <body> 
 
\t \t <script> 
 
\t \t \t function formvalid() 
 
\t \t \t { 
 
\t \t \t \t var a=document.forms["myform"]["firstname"].value; 
 
\t \t \t \t if (a.length<3) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t alert("Write your name correctly"); 
 
\t \t \t \t \t \t return false; 
 
\t \t \t \t \t } 
 
\t \t \t \t var a=document.forms["myform"]["firstname"].value; 
 
\t \t \t \t if(a==null||a=="") 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t alert("please fill the feald"); 
 
\t \t \t \t \t \t return false; 
 
\t \t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t \t var b=document.forms["myform"]["lastname"].value; 
 
\t \t \t \t if (b.length<2) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t alert("Write your last name correctly"); 
 
\t \t \t \t \t \t return false; 
 
\t \t \t \t \t } 
 
\t \t \t \t var b=document.forms["myform"]["lastname"].value; 
 
\t \t \t \t if(b==null||b=="") 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t alert("please fill the feald"); 
 
\t \t \t \t \t \t return false; 
 
\t \t \t \t \t } 
 
\t \t \t \t var c=document.forms["myform"]["email"].value; 
 
\t \t \t \t if(c==null||c=="") 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t alert("please fill the feald"); 
 
\t \t \t \t \t \t return false; 
 
\t \t \t \t \t } 
 
\t \t \t \t var c=document.forms["myform"]["email"].value; 
 
\t \t \t \t var at= c.indexOf("@"); 
 
\t \t \t \t var dot=c.lastIndexOf("."); 
 
\t \t \t \t var dot2=c.indexOf("."); 
 
\t \t \t \t if(at<1||dot<2||dot+2>=c.length||at+2>=dot2||at+3>=dot2) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t alert("Write your email correctly"); 
 
\t \t \t \t \t \t return false; 
 
\t \t \t \t \t } 
 
\t \t \t \t var d=document.forms["myform"]["phone"].value; 
 
\t \t \t \t if(d==null||d=="") 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t alert("please fill the feald"); 
 
\t \t \t \t \t \t return false; 
 
\t \t \t \t \t } 
 
\t \t \t \t var d=document.forms["myform"]["phone"].value; 
 
\t \t \t \t if(d.length>11) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t alert("Write your phone number correctly"); 
 
\t \t \t \t \t \t return false; 
 
\t \t \t \t \t } 
 
\t \t \t } 
 
\t \t </script> 
 
\t \t 
 
\t \t <form method="post" action="" onSubmit="formvalid()" name="myform"> 
 
\t \t \t <input type="text" name="firstname" id="firstname" placeholder="name"> 
 
\t \t \t <br> 
 
\t \t \t <input type="text" name="lastname" id="lastname" placeholder="lastname"> 
 
\t \t \t <br> 
 
\t \t \t <input type="text" name="email" id="email" placeholder="email"> 
 
\t \t \t <br> 
 
\t \t \t <input type="text" name="phone" id="phone" placeholder="mobile"> 
 
\t \t \t <br> 
 
\t \t \t <input type="submit" name="btn" id="btn" value="click"> 
 
\t \t </form> 
 
\t </body> 
 
</html>

來源

2017-10-15 Arman

回答

1

如果要顯示所有警報，您應該將if塊裏面沒有任何return，該return停止執行代碼後不會被執行。這裏是沒有return的代碼，它工作正常：

<!doctype html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <title>Form Validation</title> 
 
\t </head> 
 

 
\t <body> 
 
\t \t <script> 
 
\t \t \t function formvalid() 
 
\t \t \t { 
 
\t \t \t \t var a=document.forms["myform"]["firstname"].value; 
 
\t \t \t \t if (a.length<3) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t alert("Write your name correctly"); 
 
\t \t \t \t \t } 
 
\t \t \t \t var a=document.forms["myform"]["firstname"].value; 
 
\t \t \t \t if(a==null||a=="") 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t alert("please fill the feald"); 
 
\t \t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t \t var b=document.forms["myform"]["lastname"].value; 
 
\t \t \t \t if (b.length<2) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t alert("Write your last name correctly"); 
 
\t \t \t \t \t } 
 
\t \t \t \t var b=document.forms["myform"]["lastname"].value; 
 
\t \t \t \t if(b==null||b=="") 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t alert("please fill the feald"); 
 
\t \t \t \t \t } 
 
\t \t \t \t var c=document.forms["myform"]["email"].value; 
 
\t \t \t \t if(c==null||c=="") 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t alert("please fill the feald"); 
 
\t \t \t \t \t } 
 
\t \t \t \t var c=document.forms["myform"]["email"].value; 
 
\t \t \t \t var at= c.indexOf("@"); 
 
\t \t \t \t var dot=c.lastIndexOf("."); 
 
\t \t \t \t var dot2=c.indexOf("."); 
 
\t \t \t \t if(at<1||dot<2||dot+2>=c.length||at+2>=dot2||at+3>=dot2) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t alert("Write your email correctly"); 
 
\t \t \t \t \t } 
 
\t \t \t \t var d=document.forms["myform"]["phone"].value; 
 
\t \t \t \t if(d==null||d=="") 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t alert("please fill the feald"); 
 
\t \t \t \t \t } 
 
\t \t \t \t var d=document.forms["myform"]["phone"].value; 
 
\t \t \t \t if(d.length>11) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t alert("Write your phone number correctly"); 
 
\t \t \t \t \t } 
 
\t \t \t } 
 
\t \t </script> 
 
\t \t 
 
\t \t <form method="post" action="" onSubmit="formvalid()" name="myform"> 
 
\t \t \t <input type="text" name="firstname" id="firstname" placeholder="name"> 
 
\t \t \t <br> 
 
\t \t \t <input type="text" name="lastname" id="lastname" placeholder="lastname"> 
 
\t \t \t <br> 
 
\t \t \t <input type="text" name="email" id="email" placeholder="email"> 
 
\t \t \t <br> 
 
\t \t \t <input type="text" name="phone" id="phone" placeholder="mobile"> 
 
\t \t \t <br> 
 
\t \t \t <input type="submit" name="btn" id="btn" value="click"> 
 
\t \t </form> 
 
\t </body> 
 
</html>

來源

2017-10-15 15:34:37

0

那麼，你的功能幾乎是好的，但你沒有使用正確的條件。

我已經修改並測試過它，它的工作原理完美符合您的要求。

只是這個如下替換你的函數：

function formvalid() 
{ 
    var a=document.getElementById("firstname").value; 
    var b=document.getElementById("lastname").value; 
    var c=document.getElementById("email").value; 
    var at= c.indexOf("@"); 
    var dot=c.lastIndexOf("."); 
    var dot2=c.indexOf("."); 
    var d=document.getElementById("phone").value; 

    if (a.length > 0 && a.length < 3) 
    { 
     alert("Write your name correctly"); 
     return false; 
    } 

    else if(a==null||a=="") 
    { 
     alert("please fill the field"); 
     return false; 
    } 

    else if (b.length > 0 && b.length<2) 
    { 
     alert("Write your last name correctly"); 
     return false; 
    } 

    else if(b==null||b=="") 
    { 
     alert("please fill the field"); 
     return false; 
    } 

    else if(c==null||c=="") 
    { 
     alert("please fill the field"); 
     return false; 
    } 


    else if(at<1||dot<2||dot+2>=c.length||at+2>=dot2||at+3>=dot2) 
    { 
     alert("Write your email correctly"); 
     return false; 
    } 

    else if(d==null||d=="") 
    { 
     alert("please fill the field"); 
     return false; 
    } 

    else if(d.length>11) 
    { 
     alert("Write your phone number correctly"); 
     return false; 
    } 
}

來源

2017-10-15 16:01:26

0

首先，取下每個條件返回所以的條件休息也可以執行。 其次，更改條件的結構，以便每個字段只能交叉檢查一次。

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Form Validation</title> 
    </head> 

    <body> 
     <script> 
      function formvalid() 
      { 
       var a=document.forms["myform"]["firstname"].value; 
       if (a.length<3){ 
        if(a==null||a==""){ 
         alert("please fill the feald"); 
        } 
        else 
         alert("Write your name correctly");  
       } 

       var b=document.forms["myform"]["lastname"].value; 
       if (b.length<2){ 
        if(b==null||b==""){ 
         alert("please fill the feald"); 
        } 
        else 
         alert("Write your last name correctly"); 
       } 
       var c=document.forms["myform"]["email"].value; 
       var at= c.indexOf("@"); 
       var dot=c.lastIndexOf("."); 
       var dot2=c.indexOf("."); 
       if(at<1||dot<2||dot+2>=c.length||at+2>=dot2||at+3>=dot2){ 
        if(c==null||c==""){ 
         alert("please fill the feald"); 
        } 
        else 
         alert("Write your email correctly"); 
       } 
       var d=document.forms["myform"]["phone"].value; 
       if(d.length>11){ 
        if(d==null||d==""){ 
         alert("please fill the feald"); 
        } 
        else 
         alert("Write your phone number correctly"); 
       } 
      } 
     </script> 

     <form method="post" action="" onSubmit="formvalid()" name="myform"> 
      <input type="text" name="firstname" id="firstname" placeholder="name"> 
      <br> 
      <input type="text" name="lastname" id="lastname" placeholder="lastname"> 
      <br> 
      <input type="text" name="email" id="email" placeholder="email"> 
      <br> 
      <input type="text" name="phone" id="phone" placeholder="mobile"> 
      <br> 
      <input type="submit" name="btn" id="btn" value="click"> 
     </form> 
    </body> 
</html>

來源

2017-10-15 16:51:27

相關問題

 相關問題