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

Question

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

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

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

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