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

Question

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

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

我想要这样的东西：德州比萨饼或意大利肉酱面。所以我需要字符串之间有空格的模式。但是如果pattern允许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>