如何扩展正则表达式模式以防止开头和结尾出现某些字符？

Question

我正在寻找使用 HTML5 模式的基本电子邮件验证。到目前为止，我有以下内容，但我正在努力遵守以下要求的规则，尤其是。规则 1 和 3。

条件：

我只需要包含包含 ** 字母 (a-zA-Z)、数字 (0-9)、下划线 (_)、点/句点 (.)、破折号 (-) 的电子邮件地址。
我只需要涵盖标准的企业电子邮件地址，例如 firstname.lastname@domain.com、firstname.lastname@domain.co.uk、firstname.lastname@domain.de, 名字-secondname.lastname@domainPart1-domainPart2.de.
无需覆盖亚洲或阿拉伯字符，也无需覆盖此处未列出的字符。
无需覆盖不包含点/句点的电子邮件。

要求的规则：

第一个字符不能是下划线、点/句点或破折号。
最后一个字符不能是下划线、点/句点或破折号。
不能连续包含两个点/句点。
不能包含空格（也不能作为第一个或最后一个字符）。

我的方法（无效）：

<input type="email" id="email" minlength="10" pattern="^(?!^\.\_\-)(?!.*[-_.]$)[a-zA-Z0-9\.\_\-]+$" required autocomplete="off">

谁能告诉我如何正确地做到这一点，并提供对单个部分的解释？

非常感谢，
蒂姆

Answer 1

你可以使用这个：

pattern="^\w+(?:[.-]\w+)*@\w+(?:[.-]\w+)*(?:\.[a-zA-Z]{2,})+$"

解释：

^ - 开始时锚定
\w+ - 1+ 个单词字符 (a-z, A-Z, _)
(?:[.-]\w+)* - 可选 (0+) 非捕获组：点或破折号，后跟 1+ 个单词字符
@ - 文字 @
\w+ - 1+ 个单词字符
(?:[.-]\w+)* - 可选 (0+) 非捕获组：点或破折号，后跟 1+ 个单词字符
(?:\.+[a-zA-Z]{2,})+ - 必需的 (1+) 非捕获组：点，后跟 2+ 个字母字符（对于 TLD）
$ - 锚点在末尾

请考虑在 @ 符号之前支持 +label 序列。许多人使用它来对电子邮件进行分桶：

pattern="^\w+(?:[.-]\w+)*(?:\+[\w.-])?@\w+(?:[.-]\w+)*(?:\.+[a-zA-Z]{2,})+$"

这是一个工作示例。在HTML5中不需要jQuery代码，这里添加是因为代码片段似乎不支持它。如果电子邮件无效，jQuery 代码会添加一个红色边框。在 HTML5 环境中，如果电子邮件无效，则输入文本为红色。

$('#email').on('input', function(e) {
  let pattern = $(this).attr('pattern');
  let val = $(this).val();
  let regex = new RegExp(pattern);
  if(regex.test(val)) {
    $(this).removeClass('red-border');
  } else {
    $(this).addClass('red-border');
  }
});

.red-border {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
Email:
    <input type="email" id="email" pattern="^\w+(?:[.-]\w+)*@\w+(?:[.-]\w+)*(?:\.[a-zA-Z]{2,})+$" required autocomplete="off">

如何扩展正则表达式模式以防止开头和结尾出现某些字符？

How can I extend a regex pattern to prevent certain characters in the beginning and in the end?

html

regex

email-validation

html5-validation