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+字符直到结尾输入。

＆＃13;

<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>

＆＃13;

HTML输入模式不工作验证

1 个答案: