即使验证正则表达式出错，也要提交表单

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>