具有 2 个或更多字符串的 HTML5 输入模式

【问题标题】：HTML5 Input Pattern with 2 or more strings具有 2 个或更多字符串的 HTML5 输入模式
【发布时间】：2019-11-29 03:34:10
【问题描述】：

我正在尝试在 React 中使用 HTML5 模式。我的输入代码：

<input type="text" pattern="[a-zA-Z]" />

我想要这样的东西：德克萨斯披萨或意大利肉酱面。所以我需要字符串之间有空格的模式。但如果 pattern 允许 3 个或更多字符串就好了。

【问题讨论】：

【解决方案1】：

这代表一个词：

([a-zA-Z]+)

这表示一个单词后跟一个空格：

([a-zA-Z]+\s)

这代表两个或更多：

{2,}

大家一起：

([a-zA-Z]+\s){2,}([a-zA-Z]+)

两个或多个单词后跟一个空格，然后以一个单词结尾。

注意：如果您想要至少两个单词，请将{2,} 更改为{1,}。

在演示中如果只输入 1 或 2 个单词然后提交应该会有一个错误弹出窗口。如果输入 3 个或更多单词然后提交，整个表单应该会消失。

<form>
  <input name='threeWords' type='text' pattern='([a-zA-Z]+\s){2,}([a-zA-Z]+)' required>
  <input type='submit'>
</form>

【讨论】：