寻求符合特定规则的HTML表单输入JavaScript正则验证方案

我来帮你搞定这个正则验证的需求！先看看你之前尝试的两个正则为什么没达到效果：

• 第一个 ^(?=[\S\s]{3,10}$)[\S\s]*：它是限制整个字符串的长度在3-10之间，但你的需求是每个单词长度3-10，而且完全没考虑单词的组成规则和空格分隔的要求，所以肯定不对。
• 第二个 ^([a-zA-Z0-9]{3,10}\s?)*$：这个允许字符串结尾出现空格（因为\s?匹配0或1个空格），而且没有限制连续空格的情况，甚至空字符串都能匹配上，这显然不符合你的规则。

正确的正则表达式 #

直接上能满足所有要求的正则：

^[a-zA-Z0-9]{3,10}(?:\s[a-zA-Z0-9]{3,10})*$

逐段解释这个正则 #

• ^：锚定字符串的开头，确保输入不会以空格或其他非法字符开头
• [a-zA-Z0-9]{3,10}：匹配第一个有效单词——只能是3到10个字母或数字，完全符合你对单词组成和长度的要求
• (?:\s[a-zA-Z0-9]{3,10})*：这是一个非捕获组，\s严格匹配单个空格，后面跟着另一个有效单词；*表示这个组合可以出现0次或多次（也就是支持单个单词，或者多个单词用空格分隔的情况）
• $：锚定字符串的结尾，确保输入不会以空格结尾

验证测试 #

我们用你的示例来验证：

• 有效输入："bob BoB4U BOB4EVER 112233" → 完全匹配，每个单词都符合3-10长度、纯字母数字的要求，空格分隔且首尾无空格
• 无效输入：
  • "bo" → 单词长度仅2，不匹配
  • "b@b" → 包含非法符号@，不匹配
  • "bobobobobobobob" → 单词长度超过10，不匹配
  • "bob-4-u" → 包含连字符-，不匹配
  • "b_o_b" → 包含下划线_，不匹配
  • "bob " → 结尾有空格，不匹配
  • " bob" → 开头有空格，不匹配
  • "bob bob" → 两个连续空格，不匹配

在HTML表单中使用 #

你可以直接把这个正则放到表单输入框的pattern属性里，配合title提示用户规则：

<input 
  type="text" 
  pattern="[a-zA-Z0-9]{3,10}(?:\s[a-zA-Z0-9]{3,10})*" 
  title="请输入由3-10个字母/数字组成的单词，单词间用单个空格分隔，首尾不能有空格"
  required
>

内容的提问来源于stack exchange，提问作者Volodymyr Berestovskyy