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

Submitting form even when validation regex is wrong

本文关键字：提交 表单 错误 验证 正则表达式      更新时间：2023-09-26

当我提交密码和用户名都错误的表单时，我遇到了这个问题。我收到一个警告框，说我输入了错误的详细信息。但是当用户名正确并且密码验证错误时，它会给我一个 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>
您可以使用

e.preventDefault()来防止表单发送。

下面是一个代码示例 

(function(){    
    function validate(e) {
    	
      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>

尝试阻止默认事件。

将功能绑定到表单提交事件： 

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>

相关文章：