html5表单验证 - 在可选字段上使用模式

Question

我有一个可选的表单字段，我想使用新的html5模式选项。 但是，当我添加模式时，即使我没有必需的属性，该字段也变得必需。我已经包含了下面的模式。我希望用户能够将该字段留空，但如果用户在字段中输入内容，则我希望应用该模式。我怎么做到这一点？提前谢谢。

pattern="[-a-zA-Z '.,]{3,50}"

Answer 1

问题是{3,50}限制量词需要至少出现3次字符类中定义的字符。

您需要使模式可选。用可选的非捕获组包裹它：

pattern="(?:[-a-zA-Z '.,]{3,50})?"
         ^^^                   ^^

HTML5 patterns会自动包裹锚点，即上面的图案会被翻译为^(?:(?:[-a-zA-Z '.,]{3,50})?)$并匹配

• ^(?: - 字符串的开头
• (?:[-a-zA-Z '.,]{3,50})? - 1到0次出现3到50个连字符，ASCII字母，空格，'，.或,
• )$ - 字符串结束。