AJAX 请求在验证时运行两次

Question

我正在验证电子邮件输入

$("#email").on("input",function() 
{
    email = $(this).val();
     const regex_1 = /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;

     const regex_2 = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,10})+$/;

var re1 = new RegExp(regex_1);   
var re2 = new RegExp(regex_2);   

     if(re1.test(email)===true && re2.test(email)===true)
     {
         e.preventDefault();

         $.ajax({  
                url:"Validate.php",  
                method:"POST", 

                data:'type=check_email&email='+email,  

                success:function(data)
                {  

            if(data == 'FAIL')
            {
                $("#email").addClass("is-invalid");
                $("#email").removeClass("is-valid");
                $("#email").focus();
            }
            else
            {
                $("#email").addClass("is-valid");
                $("#email").removeClass("is-invalid");
            }
                }  
           });  
     }
     else
     {
           $("#email").addClass("is-invalid");
           $("#email").removeClass("is-valid");
       $("#email").focus();
     }
        $("#email").removeClass("is-invalid");
        $("#email").removeClass("is-valid"); 
  });

所以我的问题是，当通过 RegEx 的验证通过时，会进行两次 AJAX 调用，而第一个 success:function(data) 的结果本身返回 SUCCESS .

对同一实例的两次连续查询将不必要地增加服务器上的负载。

我个人认为我的绑定在这里是错误的或者我没有使用 e.preventDefault();

但我尝试使用 input focus change keyup（单独以及多个绑定）但没有任何效果，查询仍然运行两次。

这里的概念是，只有当 RegEx 测试返回 true 时，才需要运行 ajax（只需一次）。为什么在这里运行两次？

必填：电子邮件（字符串）应通过两个 RegEx 测试

Answer 1

代码中缺少事件参数e。

$("#email").on("input",function(e)
    ...
    ...
    e.preventDefault();

编辑：

要防止从处理程序触发多个事件，您可以 return false; 来自 JQuery 文档：

从事件处理程序返回 false 将自动调用 event.stopPropagation() 和 event.preventDefault()。

如果事件被多次绑定，请使用off() 确保只有一个处理程序可用。例如

$("#email").off('input').on("input",function(e) {
   ...