时间戳

首页 > 解决方案 > 无法让 type="email" 中的输入正则表达式模式正常工作

html - 无法让 type="email" 中的输入正则表达式模式正常工作

问题描述

我有以下正则表达式模式，用于验证当前有效的 JavaScript 中的电子邮件地址。

const match = (email) => /^("?)(?:[A-Z0-9_%+-]\.?)+[A-Z0-9_%+-]\1@(?:(?:(?:[A-Z0-9](?:[A-Z0-9-]*[A-Z0-9])?\.)+[A-Z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))$/i.test(email);
  
console.log(match('email@email.com'))
console.log(match('.22@email.com'))
console.log(match('@.com'))

我一直在尝试使用 HTMLpattern道具来验证这种模式，但我似乎无法让它正常工作。

我已经尝试过相同的模式，但我似乎无法让它发挥作用。我也尝试过取消正则表达式模式。

<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email" pattern='/^("?)(?:[A-Z0-9_%+-]\.?)+[A-Z0-9_%+-]\1@(?:(?:(?:[A-Z0-9](?:[A-Z0-9-]*[A-Z0-9])?\.)+[A-Z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))$/'>
  <input type="submit">
</form>

目前，任何电子邮件地址都会导致不正确的模式匹配。我是否需要以不同的方式格式化正则表达式模式以支持这一点？

标签： htmlregex

解决方案

首先，您必须使用type="text". 否则，电子邮件验证将使用内置的正则表达式完成。其次，pattern='/^...$/'必须“转换”为pattern='...'，因为两端不需要斜线，也不需要锚点，默认情况下模式是锚定的。

利用

<input type="text" id="email" name="email" pattern='("?)(?:[A-Z0-9_%+-]\.?)+[A-Z0-9_%+-]\1@(?:(?:(?:[A-Z0-9](?:[A-Z0-9-]*[A-Z0-9])?\.)+[A-Z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))'>

如果您需要使其不区分大小写，请添加a-z到字符类中，记住[A-Za-z0-9_] = \w：

<input type="text" id="email" name="email" pattern='("?)(?:[\w%+-]\.?)+[\w%+-]\1@(?:(?:(?:[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))'>

JS 演示：

input:valid {
  color: black;
}
input:invalid {
  color: red;
}
<form>
<input type="text" id="email" name="email" pattern='("?)(?:[\w%+-]\.?)+[\w%+-]\1@(?:(?:(?:[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z]{2,})|(?:(?:[0-9]{3}\.){3}[0-9]{3})|(?:\[(?:[0-9]{3}\.){3}[0-9]{3}\]))' title="Please enter the right email address." />
<input type="Submit" />
</form>

推荐阅读