HTML5 模式匹配和 MinLength 文本框问题 -答案

【问题标题】：HTML5 Pattern Matching and MinLength Textbox Issue -HTML5 模式匹配和 MinLength 文本框问题 -
【发布时间】：2016-01-29 14:02:39
【问题描述】：

我需要将这两种模式组合在一起，或者在我的<input> 字段中同时使用它们

我有模式匹配来检查有效时间 - 效果很好，并且该字段是“不需要”，所以我们将接受一个空白字段

 pattern="([01]?[0-9]|2[0-3])[0-5][0-9]"

我还想使用此模式来允许空值或最大和最小长度仅为 4 个字符...

 pattern=".{0}|.{4,4}"

我也设置了 maxlength - 可能是多余的

maxlength="4"

所以基本上我需要 4 个字符或 null 的固定字符长度（时间为 HHMM） - 两者之间没有任何内容....

我本来很乐意使用 minlength，但收到的关于它在浏览器中的接受度的报告相互矛盾...

<input type="text" name="movie" maxlength="4" pattern="([01]?[0-9]|2[0-3])[0-5][0-9]" pattern=".{0}|.{4,4}" value='<?php echo $objResult["MOVIE"]; ?>'>

【问题讨论】：

试试pattern="((?=.{4}$)([01]?[0-9]|2[0-3])[0-5][0-9]|)"。

标签： regex html forms validation pattern-matching

【解决方案1】：

尝试以下模式：

(?:([01]?[0-9]|2[0-3])[0-5][0-9]|^$)

其中说：你的模式或一个空字符串（^$ 部分）。
提示：没有验证你的模式，只是为了给你一个这个概念的想法。

【讨论】：

它是一个pattern属性，pattern默认是anchorex，所以不需要显式指定anchors。

【解决方案2】：

您在第一组中有一个可选数字：[01]?。它可以只输入 3 位数字（前导 0 是可选的）。

现在，我了解到您希望将 0 设为强制性并添加使用空值的可能性。只需从 [01]? 中删除 ? 量词并使用

<input pattern="(([01][0-9]|2[0-3])[0-5][0-9])?" title="4 digits please!" placeholder="0000"/>

外部的()? 使整个模式成为可选的（出现一次或零次）。

input:valid {
  color: green;
}
input:invalid {
  color: red;
}

<form name="form1"> 
 <input pattern="(([01][0-9]|2[0-3])[0-5][0-9])?" title="4 digits please!" placeholder="0000"/>
 <input type="Submit"/> 
</form>

注意：HTML5 pattern attribute 值是默认锚定的，即整个模式被包装成^(?: 和)$。您不必在模式之间放置 ^ 和 $，即使您像 Jan 那样添加替代项，也不需要在空值周围添加 ^/$。

用于该属性的正则表达式语言与 JavaScript 中使用的语言相同，除了 pattern 属性与整个值匹配，而不仅仅是任何子集（有点好像它在开头暗示了 ^(?:模式和最后的)$）。

【讨论】：