HTML 输入模式不起作用答案

【问题标题】：HTML input pattern not workingHTML 输入模式不起作用
【发布时间】：2017-02-15 03:39:34
【问题描述】：

.*(\d{3}\-\d{3}\-\d{2}\-\d{2}|\d{3}\-\d{2}\-\d{2}\-\d{3}|\d{10}).* 这个模式运行良好。但是最近它突然停止在chrome和opera中工作。这里发生了什么？这里有什么问题，怎么错了？ Opera 通知无效转义，在 chrome 中也是如此。当我在 js 中检查它时它工作正常。

<form>
<input type="text" pattern=".*(\d{3}\-\d{3}\-\d{2}\-\d{2}|\d{3}\-\d{2}\-\d{2}\-\d{3}|\d{10}).*">
<button>
Send
</button>
</form>

【问题讨论】：

你能告诉我们你是如何运行这个正则表达式的吗？
您不需要转义破折号（只需使用-，而不是\-），这一定是您被警告过的，并且可能是功能障碍的原因。只有在字符类中按字面意思使用时，才需要转义破折号。
在 OP 中用代码 sn-p 更新
同时告诉我们确切的错误信息，而不是对其的解释。
其实@Aaron 是正确的。只需使用 - 而不是 \- 就可以正常工作。

标签： regex html forms input

【解决方案1】：

尝试使用下面的概念来实现验证日期格式

&lt;form onsubmit="alert('Submitted.');return false;"&gt;&lt;input required="" pattern="(0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}" value="" name="dates_pattern0" id="dates_pattern0" list="dates_pattern0_datalist" placeholder="Try it out." type="text"&gt;&lt;input value="»" type="submit"&gt;&lt;/form&gt;

您可以通过此链接找到更多验证 - http://html5pattern.com/Dates

【讨论】：

【解决方案2】：

重点是 Chrome 和 Firefox 已经支持 ES6 regex 规范，默认支持 Unicode 模式。

Unicode 模式对于可以在模式内转义的字符有更严格的规则。见this reference：

IdentityEscape：在 BMP 模式中，许多字符可以以反斜杠为前缀，并被解释为本身（例如：如果\u 后面没有四个十六进制数字，则将其解释为@ 987654324@)。 在仅适用于以下字符的 Unicode 模式中（释放 \u 用于 Unicode 代码点转义）：^$\..*+?@987654333 @)[]{}|

同一组字符在ES6 specs page 中称为SyntaxCharacter。

因此，您只能在将其视为特殊字符的字符类中转义 - 并使其成为文字，您可以对其进行转义。在其他任何地方都不能逃脱。

<form>
  <input type="text" pattern=".*(\d{3}-\d{3}-\d{2}-\d{2}|\d{3}-\d{2}-\d{2}-\d{3}|\d{10}).*">
  <input type=Submit>
 </form>

【讨论】：