如何检查文本的验证不是电子邮件？答案

【问题标题】：How to check validation for a text is not an email?如何检查文本的验证不是电子邮件？
【发布时间】：2019-05-13 12:54:12
【问题描述】：

我有一个用户输入作为“文本”，但是人们坚持在该输入中输入他们的电子邮件地址。

有没有办法防止人们使用 HTML5 或任何其他方式输入他们的电子邮件地址？

此代码检查输入是否为电子邮件，我需要相反的加输入类型文本。

如果可能的话，我还必须设置自定义验证消息。

<form action="/action_page.php">
  E-mail: <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

这就是我将如何将它与自定义验证消息一起使用

<input type="text" name="username" id="username" pattern="THIS IS THE PATTERN I AM LOOKING FOR" required placeholder="Enter user name"
    oninvalid="this.setCustomValidity('Do not type an email address here')"
    oninput="this.setCustomValidity('')"  />

【问题讨论】：

我认为您应该检查为什么人们坚持在该字段中输入他们的电子邮件。可能是用户体验缺陷之类的。
我有一个用户输入为“文本”——不，你没有。您仅有的输入是 email 和 submit。
@Quentin 呢？
@DontVoteMeDown 实际上不是用户体验缺陷。这是第 3 部分集成。该第 3 方使用“用户名”登录，但对于我们的网站，他们使用电子邮件地址登录。这有点难以解释。
@SNaRe 这就是 UX 缺陷的定义......您的用户习惯于使用电子邮件登录，因此当出现“登录”时，他们会输入他们的电子邮件。需要明确登录是/for/应该是什么（用户名）。

标签： javascript jquery html validation

【解决方案1】：

这是一种方法，使用 HTML5 的输入模式。

<input type="text" 
       name="username" 
       pattern="^[^@]+$">

这就是说“如果文本中的任何位置都有@，请不要让表单提交。”

如果您想对其进行测试，请参阅 http://html5pattern.com/。

【讨论】：

【解决方案2】：

HTML Input Pattern 属性用于指定检查输入元素值的正则表达式。

根据您的要求使用了正则表达式

【讨论】：

【解决方案3】：

请检查此模式，可能会对您有所帮助 (([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))

【讨论】：

我只需要相反的 [a-z0-9._%+-]+@[a-z0-9.-]+\.[az]{2,}$ 这是这样太长了。
我测试了这个，输入bob@example.com时没有报错