如何使用jQuery针对指定ID表单拦截特定邮箱域名提交

可以直接通过限定jQuery选择器的查找范围实现需求，不需要额外写独立的表单ID判断逻辑，调整后规则只会作用在ID为#form-id的目标表单上，不会影响页面内其他允许填写个人邮箱的表单。我同时修复了原代码里正则未闭合、DOM方法调用写法错误的问题。

调整后可直接使用的代码 #

// 需拦截的个人邮箱域名校验规则（补全原代码缺失的正则闭合逻辑）
var emailBlockRule = /^([\w-\.]+@(?!gmail\.com)(?!yahoo\.com)(?!icloud\.com)(?!hotmail\.com)(?!aol\.com)[\w-\.]+\.[\w]{2,})?$/;
// 校验不通过提示
var emailAlert = '请输入有效的企业邮箱地址（不支持Gmail、Outlook、Yahoo等个人邮箱）';

// 仅绑定目标表单下的提交按钮点击事件
$('#form-id input[type=submit]').click(function() {
  // 仅遍历校验目标表单内的邮箱输入框
  $("#form-id input[type=email]").each(function() {
    var email = $(this).val().trim().toLowerCase();
    if (emailBlockRule.test(email)) {
      this.setCustomValidity('');
    } else {
      this.setCustomValidity(emailAlert);
    }
  })
})

// 仅给目标表单内的邮箱输入框绑定输入重置事件，避免每次按键都弹出提示
$('#form-id input[type=email]').on('input', function() {
  this.setCustomValidity('');
});

关键修改说明 #

• 所有元素选择器前增加#form-id层级限定，把事件绑定、元素遍历的范围严格锁死在目标表单内，其他表单的元素完全不会触发这套校验逻辑
• 补全原代码未写完的正则表达式：原正则只写了域名拦截的负向预查部分，缺少域名后缀匹配逻辑，会直接导致校验失效
• 修复原代码(this).setCustomValidity()的写法问题，这里的this是原生DOM对象，可直接调用方法，不需要额外包装
• 新增输入值首尾去空格处理，避免用户误输入空格导致校验结果错误

可选优化：可以把提交校验逻辑绑定在#form-id的submit事件上，而非提交按钮的click事件，能避免用户按回车键提交表单时绕过校验。

内容的提问来源于stack exchange，提问作者Jack Widnell