禁止在 html5 输入字段中使用 @ 字符答案

【问题标题】：Disallow @ character in html5 input field禁止在 html5 输入字段中使用 @ 字符
【发布时间】：2021-12-31 01:34:42
【问题描述】：

我们一直在成功地使用这样的 html5 字段验证：

<input type="text" title="This field is required" required>

但是对于特定的字段，我们喜欢在字段中禁止特定的特殊字符：@。我们尝试使用模式，但它不起作用。代码如下所示

&lt;input type="text" pattern="[^@]" title="Do not allow @" title="This field is required" required&gt;

关于如何正确执行此操作的任何想法。顺便祝大家新年快乐，希望我们在新的一年不会遇到任何编码问题！

【问题讨论】：

您如何测试该模式是否有效？模式标签可以阻止表单被提交，它不会阻止用户输入与模式不匹配的数据

标签： html regex

【解决方案1】：

如果您在[^@] 之后在pattern 属性值中添加+，则可以在提交时禁止@ 字符：

<form>
<input type="text" pattern="[^@]+" title="Do not allow @" title="This field is required" required />
<input type="Submit"/>
</form>

pattern="[^@]+" 模式转换为^(?:[^@]+)$，它匹配除@ 之外的一个或多个字符，从开始到结束。

但是，如果您还想阻止@ char 输入，您可以将上述代码增强为

<form>
  <input type="text" pattern="[^@]+" onkeypress="return event.charCode !== 64" title="Do not allow @" title="This field is required" required />
  <input type="Submit" />
</form>

这仍然允许在输入字段表单中粘贴 @。

【讨论】：

【解决方案2】：

如果您想禁止用户写入@ 字符，请使用此代码

<!DOCTYPE html>
<html>
<body>
  <form id="my-form">
    <input type="text" id="myInputID">
    <button type="submit" onclick="submit()">Submit</button>
  </form>

  <script>
    var el = document.getElementById("myInputID");
    el.addEventListener("keypress", function(event) {
      if (event.key === '@') {
        event.preventDefault();
      }
    });

  </script>
</body>
</html>

【讨论】：