HTML 输入模式无效验证

Question

我有一个很奇怪的问题。

在带有一个输入字段的非常示例的搜索表单中：

 <input pattern="\S.{3,}"  name="text"/>

值验证失败

 dds sdsd

，但是JS说没关系。

/\S.{3,}/.test('     dds sdsd')
true
/\S.{3,}/.test('    ')
false

也许我遗漏了一些小东西或模式错误，但根据 regex.com，它应该是有效的。
这个想法是为了防止提交空白。我正在寻找不写JS代码的解决方案。

<form method="GET" action="/">
<input class="form-control" name="text" type="text" pattern="\S.{3,}"  />
<input type="submit" value="search" >
</form>

Answer 1

HTML5 pattern默认锚定，^(?:和)$通过JS正则引擎时添加在模式的开始/结束。

你需要使用

<input pattern=".*\S.{3,}.*"  name="text"/>

使用RegExp#test 使其工作方式与在 JS 中相同。

但是，要在输入中至少需要 1 个非空白字符，我建议使用

<input pattern="\s*\S.*"  name="text"/>

见this regex demo。它将匹配字符串开头的 0+ 个空白字符 (\s*)，然后匹配任何非空白字符 (\S)，然后贪婪地抓取任何 0+ 个字符，直到输入结束。

<form method="GET" action="/">
<input class="form-control" name="text" type="text" pattern="\s*\S.*" title="No whitespace-only input allowed."/>
<input type="submit" value="search" >
</form>