検証正規表現が間違っていてもフォームを送信する

Question

パスワードとユーザー名の両方が間違っているフォームを送信すると、この問題が発生します。間違った詳細を入力したという警告ボックスが表示されます。しかし、ユーザー名が正しいときにパスワードの検証が間違っていると、誤って返されたときでもフォームを送信してokを押すと、私にアレットボックスが表示されます。 ヘルプはずっとあなたが送信フォームを防ぐためにe.preventDefault()を使用することができます

<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

を高く評価してください。ここで

は、コード例です

(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>