即使驗證正則表達式出錯，也要提交表單

Question

我在提交表單時密碼和用戶名都是錯誤的時候出現此問題。我收到一個警告框，表示我輸入了錯誤的詳細信息。但是，當用戶名是正確的，密碼驗證是錯誤的，它會給我一個arlet框時按下確定它會提交表格，即使我已經返回false。 請幫助非常感激

<script type="text/javascript"> 
    function validate(form_id, firstName, password){ 
     var Reg = /^[A-Za-z0-9_]{1,20}$/; 
     var Reg1 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/; 
     var username = document.forms[form_id].elements[firstName].value; 
     var password = document.forms[form_id].elements[password].value; 

     if (Reg.test(username) == false) { 
      alert('Invalid Username.'); 
      document.forms[form_id].elements[firstName].focus(); 
      return false; 
     } 

     if (Reg1.test(password) == false) { 
      alert('Invalid Password.'); 
      document.forms[form_id].elements[password].focus(); 
      return false; 
     } 
    } 
</script> 

<form id="form_id" action="userlogininput.cgi" onsubmit="javascript:return validate('form_id','firstName','password');" name="form" method="post"> 
    Username : <input type="text" id="firstName" name="firstName" class="textboxH-300" required><br> 
    Password : <input type="password" id="password" name="password" class="textboxH-300" required><br><br> 
    <input id="submitbtn" type="submit" value="Submit"/> 
</form> 

Answer 1

儘量防止違約事件。

綁定函數的形式提交事件：

function validate(form){ 
 
     var Reg = /^[A-Za-z0-9_]{1,20}$/; 
 
     var Reg1 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/; 
 
     var username = form.querySelector('[name=firstName]'); 
 
     var password = form.querySelector('[name=password]'); 
 

 
     if (Reg.test(username.value) == false) { 
 
      event.preventDefault(); 
 
      alert('Invalid Username.'); 
 
      username.focus(); 
 
      return false; 
 
     } 
 

 
     if (Reg1.test(password.value) == false) { 
 
      event.preventDefault(); 
 
      alert('Invalid Password.'); 
 
      password.focus(); 
 
      return false; 
 
     } 
 
    }

<form onsubmit="validate(this)"> 
 
    <input name="firstName"> 
 
    <br> 
 
    <input name="password"> 
 
    <br> 
 
    <button type="submit">submit</submit> 
 
</form>

Answer 2

您可以使用e.preventDefault()防止形式發送。

這裏是一個代碼示例

(function(){  
 
    function validate(e) { 
 
    \t 
 
     e.preventDefault(); // prevent the form sending 
 
     
 
    
 
     var Reg = /^[A-Za-z0-9_]{1,20}$/; 
 
     var Reg1 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/; 
 
     var username = document.getElementById('firstName'); 
 
     var password = document.getElementById('password'); 
 

 
     if (Reg.test(username.value) == false) { 
 
     alert('Invalid Username.'); 
 
     username.focus(); 
 
     return false; 
 
     } 
 

 
     if (Reg1.test(password.value) == false) { 
 
     alert('Invalid Password.'); 
 
     password.focus(); 
 
     return false; 
 
     } 
 
    } 
 
    
 
    //add event listener for form submission 
 
    document.getElementById('form_id').addEventListener('submit',validate); 
 
})();

<form id="form_id" action="userlogininput.cgi" name="form" method="post"> 
 
    Username : 
 
    <input type="text" id="firstName" name="firstName" class="textboxH-300" required> 
 
    <br> Password : 
 
    <input type="password" id="password" name="password" class="textboxH-300" required> 
 
    <br> 
 
    <br> 
 
    <input id="submitbtn" type="submit" value="Submit" /> 
 
</form>