忽略空格和制表符的 HTML5 最小字符长度验证答案

【问题标题】：HTML5 minimum character length validation ignoring spaces and tabs忽略空格和制表符的 HTML5 最小字符长度验证
【发布时间】：2017-06-03 16:45:43
【问题描述】：

我正在使用带有“必需”的 HTML5“模式”属性来验证输入框。 HTML5 的 required 属性有效，但它可以接受空格和制表符，这是不好的，因为用户只会输入空格。我需要正则表达式，这样它才能接受空格和制表符，但只能计算字符。例如“ronny jones”，这应该是 10。

在 javascript 中，我们使用类似的东西来做，我在 HTML5 中寻找类似的东西

      var name = document.forms['contact']['name'].value.replace(/ /g,""); // remove whitespace
  if(name.length<6){  // count number of character.
     document.getElementById('message').innerHTML="Enter correct Name";   
     return false;
  }

我在 SO 上找到了一个与此相关的问题：Is there a minlength validation attribute in HTML5?，但它接受空格和制表符，这是我不想要的。

以下是我的 HTML5 模式代码，

    <input type="text" name="name" class="form-control" placeholder="Your Full Name" pattern="[A-Za-z]{6,}" title="Name should have atleast 6 characters." required="" />

【问题讨论】：

使用 "min" html5 属性效果很好，您需要按如下方式更新您的正则表达式：pattern="([a-zA-Z ]+)"。您的完整 html 输入：<input type="text" name="name" class="form-control" placeholder="Your Full Name" pattern="([A-Za-z ]+)" min="6" title="Name should have at least 6 characters." required="" />
@SorangwalaAbbasali 根本不工作。
试试这个正则表达式并保持 min 属性不变：^\w+( +\w+)*$。它将允许第一个字母，然后是可能的空格，然后是单词和数字
@SorangwalaAbbasali 不为“Anthony”工作。安东尼之后还有空间
试试这个：pattern="^[a-zA-Z0-9_.,*&#""\\/']+[a-zA-Z0-9_.,*&#""\\/' ]+$"

标签： javascript regex html

【解决方案1】：

我管理了一个愚蠢的黑客，按照你的要求做：

<input type="text" name="name" class="form-control" placeholder="Your Full Name" pattern="\s*(\S\s*){6,}" title="Name should have at least 6 characters." required="" />

必须有 6 个非空格字符才能通过。所以 "asdfgh", "abc def " 会起作用，但 "abc de" 会失败。

它不适用于您关于“Anthony 后面有一个空格”的评论，但由于 Anthony 包含 6 个字符，那么可以吗？如果不是，您能否在问题中进一步澄清。

解释它是如何工作的：

它采用“采用 1 个非空格字符”\S 后跟“无或更多空格字符”\s* 的模式
您需要匹配模式 6 次或更多次 (pattern){6,} 即 (\S\s*){6,}
然后在前面允许非或更多空格\s*

如果您想将允许的字符限制为 Alpha，请将 \S 更改为 [A-Za-z]。

是的，这是一个 hack IMO，因为在内部解析长字符串将是地狱。但做的工作。您可能还想与maxlength 混合以限制它？

【讨论】：

在 text 前留一些空间，它不会起作用例如。 “安东尼”
是的，它正在工作。你能解释一下你在模式中做了什么吗？此外，还有一些很好的资源来学习这种类型的正则表达式。这将是一个很大的帮助。谢谢。
@Robbie 您的正则表达式模式可以简化为(\S\s*){6,}（不需要初始\s*，\S 匹配任何非空白字符，\s 不需要在方括号中 [ ] 和 {1,1} 是没有意义的，因为这是默认行为）。不过答案很好！

【解决方案2】：

 <form action="demo.php">
    <input id="name" type="text" pattern="^((?:\s*[A-Za-z]\s*){6,})$">
    <input type="submit">
 </form>

这将适用于您的情况.. 正是您想要的。我设置的字符限制是从 6 到 40..

【讨论】：

看看我的问题，它已经包含了做事的javascript代码。我需要借助模式在 HTML5 中完成。
@JoneDotosvky 好的。让我检查一下
@JoneDotosvky 检查我更新的答案.. 我已经检查过了.. 它的工作.. 试试吧
谢谢哥们，但是当你在文本后给空间时它不起作用例如“Anthony__”
@JoneDotosvky 这个可以通过在末尾添加 \s* 来修复（就像我的答案在开头有 \s* 一样）。它们本质上是相同的 hacky 技术，但这一技术限制为 40 个字符，并且只强制使用字母字符。混合搭配这两个选项。