如何验证 HTML 表单中至少 3 个单词？答案

【问题标题】：How can I validate a minimum of 3 words in a HTML form?如何验证 HTML 表单中至少 3 个单词？
【发布时间】：2015-06-18 08:49:45
【问题描述】：

我已经尝试解决这个问题一段时间了，但一直没能解决。我必须制作一个表单，并且必须验证名称输入以在 JavaScript 中至少包含 3 个单词。我认为最好的方法是使用 Regex 及其 \b 属性。

这是

    <input type="text" class="texto" name="Nombre" id="name" title="nombre_cliente" style="color:#888;" placeholder="Nombre del cliente" />

我在我的 JavaScript 代码中的意思是：

        if(document.getElementById("name").value.match(RegExCodeForMin3Words) === null){
        alert("Name invalid");
    }

到目前为止，我一直无法学习如何使正则表达式匹配单词的数量（我还是 Regex 的初学者）。你能帮我解决这个问题吗？也许正则表达式不是解决这个问题的最佳选择？

谢谢！

【问题讨论】：

How can check a minimum 3 characters in a given value ,using regular expression的可能重复
不，这不是骗子，至少不是这样。数单词≠数字符。

标签： javascript html regex validation counter

【解决方案1】：

正则表达式匹配包含至少三个单词的字符串。

\S+\s+\S+\s+\S+

\S+ 匹配一个或多个非空格字符。如果您将单词表示为非空格字符的任意组合，那么您可以使用上述正则表达式。

或

\b\w+\b(?:.*?\b\w+\b){2}

DEMO

> /\b\w+\b(?:.*?\b\w+\b){2}/.test('foo bar buz')
true
> /\b\w+\b(?:.*?\b\w+\b){2}/.test('foo bar')
false
> /\b\w+\b(?:.*?\b\w+\b){2}/.test('foo bar bux foobar')
true

\w+ 匹配一个或多个单词字符。所以这形成了一个完整的单词。 (?:.*?\b\w+\b){2} 确保在第一个单词之后必须有另外两个单词。 {2} 量词恰好重复前一个标记两次。

【讨论】：

我担心\b 的效果不太好（检查我的答案和/或尝试使用带有变音符号的实际数据......）。
第二个选项是什么？您的所有示例都使用\b，除了顶部使用\Ss 的示例。它将把“Éléonore”算作两个词。
我的第一个选项如何将Éléonore 计为两个词？向我解释我提供的这两个替代答案有什么问题。我不知道 op 到底是什么意思，所以我添加了两个选项。
试试看。这是因为，在 JavaScript 正则表达式实现中，\b 仅将 ascii 字母视为字内字符（而 \w 接受许多（但不是全部）重音字母）。
我添加了\b 替代方案，只是因为操作提到了这一点`我认为最好的方法是使用正则表达式及其 \b 属性。`。 @Touffy ya 我知道你想说什么，我已经告诉过你我添加了一个替代选项。

【解决方案2】：

不要使用正则表达式来查找单词，这不是必需的。只需在空白处拆分即可。

var wordCount = document.getElementById("name").trim().split(/\s+/).length;
if( wordCount < 3 ) { ... }

首先调用trim()，这样就不会有前导或尾随空格会被错误地拆分。然后在 \s+ 上拆分它，这是字符组空格 1 次或多次。 split 返回由分隔符分隔的所有组的数组，在本例中为空格。数组的元素都是“单词”，或者输入中用空格分隔的任何内容。

【讨论】：

还有……那怎么不使用正则表达式？此外，(true) 正则表达式效率很高，不使用的原因是有些东西不能很好地表示。
“查找单词的正则表达式”是明确的措辞。正则表达式可能非常有用，但也可能难以阅读。该解决方案简单易读，不会混淆可选的捕获组和单词边界，并且非常容易为n 单词进行修改。 “效率”与此用例无关。
1) 但您在split 中使用正则表达式作为分隔符。 2) {n,} 修饰符可以很容易地改变字数。 3）(?:)不是可选抓包，是完全不抓包；丑，我承认。 4) 如果您的目标是简单，<input pattern> 很难被击败。

【解决方案3】：

免责声明：在许多语言中，没有 100% 准确的标记化（拆分单词）方法。

您不能使用\b，因为不幸的是，它与大多数带有变音符号的字母周围的“break”相匹配（例如“é”）。

浪漫语言的一个简单近似是寻找空格和撇号。

/.+?(?:[\s'].+?){2,}/

解释：

[\s'] 匹配空白字符或撇号。它可以随心所欲地改进（可以包括标点符号等），但想法是它是“单词之间的东西”。这部分决定了分词器的质量。
.+? 匹配任何其他无法匹配的非空字符串。它没有说明单词的构成。
(?:[\s'].+?) 只是一个分隔符序列和一个“分隔符之间的字符串”（我们希望是一个词）。开头的?: 阻止引擎捕获括号中的组，但这并不是必需的。我们希望括号将量词应用于整个序列。
最后的正则表达式 .+?(?:[\s'].+?){2,} 表示“一个单词，然后出现 2 次或多次一个分隔符 + 一个单词的序列”（总共 2+1=3 个单词最少）。

此外，您可以使用 pattern attribute 以声明方式验证您的文本字段，而不是使用 JavaScript：

<input type="text" name="Nombre" … required pattern=".+?(?:[\s'].+?){2,}">

【讨论】：

支持环形交叉路口提及和处理土耳其测试

【解决方案4】：

我猜你可以在javascript中对这个变量使用length方法。

例如： var s="123456"; 你可以通过 s.length 得到长度

【讨论】：