如何使用 Jquery 防止某些表单上的某些输入？答案

【问题标题】：How to prevent certain inputs on certain forms using Jquery?如何使用 Jquery 防止某些表单上的某些输入？
【发布时间】：2022-07-08 01:24:19
【问题描述】：

我最近有一个很好的设置，可以防止 gmail、hotmail、yahoo 等电子邮件能够在我们的表单上提交，以便为我们公司申请演示。但是，我们现在在某些页面上有多个表单，其中一些我们将允许个人电子邮件。

我的问题是如何调整以下脚本以禁止在特定表单 ID 上输入？是否可以简单地添加一些检测表单 ID 的东西（我们现在称之为#form-id）。

// EMAIL DOMAINS TO BLOCK
var emailList = /^([\w-\.]+@(?!gmail.com)(?!yahoo.com)(?!icloud.com)(?!hotmail.com)(?!aol.com)

// ALERT MESSAGE TO BE SHOWN
var emailAlert = 'Please input a valid work email address (NOT Gmail, Outlook, Yahoo, etc.)'

// VALIDATE
$('input[type=submit]').click(function() {
  $("input[type=email]").each(function() {
    var email = $(this).val().toLowerCase();
    if (emailList.test(email)) {
        (this).setCustomValidity('');
    } else {
      (this).setCustomValidity(emailAlert);
    }
  })
})

// PREVENTS ALERT FROM APPEARING WITH EACH KEYPRESS
$('input[type=email]').on('input', function() {
  (this).setCustomValidity('');
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

在不了解您的情况的情况下，在基本原则上，您应该能够通过修改 jquery 函数调用的选择器部分来确定您的代码范围。

例如，如果您只想在 ID 为 #form-id 的表单上执行此验证，理论上您应该能够将代码更改为：

$('#form-id input[type=submit]').click(function() {
  $("#form-id input[type=email]").each(function() {
    var email = $(this).val().toLowerCase();
    if (emailList.test(email)) {
        (this).setCustomValidity('');
    } else {
      (this).setCustomValidity(emailAlert);
    }
  })
})

// PREVENTS ALERT FROM APPEARING WITH EACH KEYPRESS
$('#form-id input[type=email]').on('input', function() {
  (this).setCustomValidity('');
});

这种格式 - 两个子选择器由空格分隔 - 意味着第二个子选择器只有在它出现在第一个子选择器内时才会匹配。

考虑示例#form-id input[type=submit]

此选择器将匹配在您的表单（或任何父元素）中找到的类型为 submit 且 ID 为 form-id 的输入

【讨论】：