多個字段的錯誤消息驗證問題

我正在嘗試使用簡單的JavaScript代碼爲多個字段進行表單驗證。多個字段的錯誤消息驗證問題

我面臨的問題是，如果我刪除return那麼代碼工作正常。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>JavaScript form validation - checking all numbers</title> 
    <style type="text/css"> 
    li { 
     list-style-type: none; 
     font-size: 16pt; 
    } 
    .mail { 
     margin: auto; 
     padding-top: 10px; 
     padding-bottom: 10px; 
     width: 400px; 
     background : #D8F1F8; 
     border: 1px soild silver; 
    } 
    .mail h2 { 
     margin-left: 38px; 
    } 
    input { 
     font-size: 20pt; 
    } 
    input:focus, textarea:focus{ 
     background-color: lightyellow; 
    } 
    input submit { 
     font-size: 12pt; 
    } 
    .rq { 
     color: #FF0000; 
     font-size: 10pt; 
    } 
    </style> 


</head> 
<body onload='document.form1.text1.focus()'> 
    <div class="mail"> 
     <h2>Form Valiodation</h2> 
     <form name="form1" action="#"> 
      <ul> 
       <!-- enter number in following --> 
       <li> 
        Enter Number: 
       </li> 
       <li><input type='text' name='text1'/></li> 
       <li class="rq"> 
        *Enter numbers only. 
        <p id="error"></p> 
       </li> 
       <li>&nbsp;</li> 
       <!-- ***************** --> 
       <!-- enter name in following --> 
       <li> 
        Enter Name: 
       </li> 
       <li id="myList"> 
        <input type='text' name='text2'/> 
        <p id="error2"></p> 
       </li> 
       <li class="rq"> 
        *Enter alphabets only. 
       </li> 
       <!-- ***************** --> 
       <li>&nbsp;</li> 
       <input type="submit" name="submit" value="Submit" onclick="allVal(event)" /> 
       <li>&nbsp;</li> 

      </ul> 
     </form> 
    </div> 
    <script type="text/javascript"> 
    function allVal(event) { 

     event.preventDefault(); 
     var numbers = /^[0-9]+$/; 
     var letters = /^[A-Za-z]+$/; 


     /* matching the number as follows */ 
     var matchNum = document.form1.text1.value; 
     if(matchNum.match(numbers)) { 
      document.getElementById("error").innerHTML="success"; 
      return true; 
     } else if(matchNum.match(letters)) { 
      document.getElementById("error").innerHTML="only numbers allowed"; 
      return false; 
     } else { 
      document.getElementById("error").innerHTML="please enter valid numbers"; 
      return false; 
     } 

     /* matching the name as follows */ 
     var matchName = document.form1.text2.value; 
     if(matchName.match(letters)) { 
      document.getElementById("error2").innerHTML="success"; 
      return true; 
     } else { 
      document.getElementById("error2").innerHTML="error"; 
      return false; 
     } 


    } 

    </script> 
</body> 
</html>

來源

2017-07-19 narend

什麼是您的預期/期望？要在這些字段上顯示所有錯誤消息，或者只是第一個驗證失敗？ – zzT

當從函數返回，碼塊被終止進一步執行。
設置一個var isValid = true;並改變其在基於在所述結束條件和return isValid;每個if..else 塊值。

演示 -

function allVal(event) { 
 
    var isValid = true; 
 
    event.preventDefault(); 
 
    var numbers = /^[0-9]+$/; 
 
    var letters = /^[A-Za-z]+$/; 
 

 

 
    /* matching the number as follows */ 
 
    var matchNum = document.form1.text1.value; 
 
    if (matchNum.match(numbers)) { 
 
    document.getElementById("error").innerHTML = "success"; 
 
    isValid = true; 
 
    } else if (matchNum.match(letters)) { 
 
    document.getElementById("error").innerHTML = "only numbers allowed"; 
 
    isValid = false; 
 
    } else { 
 
    document.getElementById("error").innerHTML = "please enter valid numbers"; 
 
    isValid = false; 
 
    } 
 

 
    /* matching the name as follows */ 
 
    var matchName = document.form1.text2.value; 
 
    if (matchName.match(letters)) { 
 
    document.getElementById("error2").innerHTML = "success"; 
 
    isValid = true; 
 
    } else { 
 
    document.getElementById("error2").innerHTML = "error"; 
 
    isValid = false; 
 
    } 
 

 
    return isValid; 
 

 
}

li { 
 
    list-style-type: none; 
 
    font-size: 16pt; 
 
} 
 

 
.mail { 
 
    margin: auto; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    width: 400px; 
 
    background: #D8F1F8; 
 
    border: 1px soild silver; 
 
} 
 

 
.mail h2 { 
 
    margin-left: 38px; 
 
} 
 

 
input { 
 
    font-size: 20pt; 
 
} 
 

 
input:focus, 
 
textarea:focus { 
 
    background-color: lightyellow; 
 
} 
 

 
input submit { 
 
    font-size: 12pt; 
 
} 
 

 
.rq { 
 
    color: #FF0000; 
 
    font-size: 10pt; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>JavaScript form validation - checking all numbers</title> 
 
</head> 
 

 
<body onload='document.form1.text1.focus()'> 
 
    <div class="mail"> 
 
    <h2>Form Valiodation</h2> 
 
    <form name="form1" action="#"> 
 
     <ul> 
 
     <!-- enter number in following --> 
 
     <li> 
 
      Enter Number: 
 
     </li> 
 
     <li><input type='text' name='text1' /></li> 
 
     <li class="rq"> 
 
      *Enter numbers only. 
 
      <p id="error"></p> 
 
     </li> 
 
     <li>&nbsp;</li> 
 
     <!-- ***************** --> 
 
     <!-- enter name in following --> 
 
     <li> 
 
      Enter Name: 
 
     </li> 
 
     <li id="myList"> 
 
      <input type='text' name='text2' /> 
 
      <p id="error2"></p> 
 
     </li> 
 
     <li class="rq"> 
 
      *Enter alphabets only. 
 
     </li> 
 
     <!-- ***************** --> 
 
     <li>&nbsp;</li> 
 
     <input type="submit" name="submit" value="Submit" onclick="allVal(event)" /> 
 
     <li>&nbsp;</li> 
 

 
     </ul> 
 
    </form> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-07-19 09:19:00 Sajal

多個字段的錯誤消息驗證問題

回答

相關問題