如何检查文本是否是电子邮件的验证？

Question

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

有没有办法阻止人们使用 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('')"  />

Answer 1

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

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

@这就是说“如果文本中存在任何地方，则不要让表单提交。”

如果您想测试一下，请访问http://html5pattern.com/ 。