givenname.lastname@containsstring.domain 的 HTML5 输入模式答案

【问题标题】：HTML5 input pattern for givenname.lastname@containsstring.domaingivenname.lastname@containsstring.domain 的 HTML5 输入模式
【发布时间】：2018-11-17 19:19:45
【问题描述】：

我正在尝试通过 HTML5 模式验证电子邮件输入。

输入字段必须遵循以下格式：

givenname.lastname@simonsays.domain

也就是说我需要检查是否有一个字母串+一个点+另一个字母串+必须包含字符串simon。

到目前为止我已经找到了

pattern=".*simon.+"

但是，它只检查输入是否包含simon。

我们将不胜感激！

【问题讨论】：

stackoverflow.com/questions/5601647/…
您可以在regex101.com 中试错您的正则表达式，它甚至对您的正则表达式的实际含义进行了详细解释
regex101.com 已损坏。
@sln 你是什么意思？它对我有用。
试试pattern="\S+\.\S+@\S*simon\S*\.\S+"

标签： regex html

【解决方案1】：

你可以使用

pattern="\S+\.\S+@\S*simon\S*\.\S+"

模式被解析为/^(?:\S+\.\S+@\S*simon\S*\.\S+)$/ 并匹配

^ - 字符串开头
(?: - 非捕获容器组的开始
\S+\.\S+ - 1+ 个非空白字符、. 和 1+ 个非空白字符
@ - 一个 @ 字符
\S* - 0+ 个非空白字符
simon - 文字子字符串
\S* - 0+ 个非空白字符
\. - 一个点
\S+ - 1+ 非空白字符
) - 容器组结束
$ - 字符串结束。

HTML5：

input:valid {
  color: black;
}
input:invalid {
  color: red;
}

<form name="form1"> 
 <input pattern="\S+\.\S+@\S*simon\S*\.\S+" title="Please enter an email address with 'simon' in the domain name!" placeholder="name.surname@domain.com" value="my.name@some-simon-here.com" />
 <input type="Submit"/> 
</form>

如果您想“控制”模式中的点，请将\S 替换为匹配除空格和. 之外的任何字符的[^\s.]。

【讨论】：

感谢您提供非常有用的解释！