1

我正在尝试使用 javascript 复制 html5 模式属性，但结果不一致。

模式是[a-zA-Z\. \']+

在 Chrome 中，键入“asd 123”不会通过测试。

使用类似的东西

el.value.match(new RegExp(el.pattern))

让“asd 123”通过，显然是因为“asd”是匹配的。

^我可以通过在我的模式的开头和结尾添加和来解决这个特定问题$，但问题是 - 是否有一些功能完全按照模式属性实现？还有其他我应该期待的惊喜吗？

4

3 回答 3

3

添加^并且$或多或少地将其完全作为pattern属性实现。pattern根据HTML 5 ( http://www.w3.org/html/wg/drafts/html/master/forms.html#the-pattern-attribute )中 w3c 规范的最新版本：

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

（重点补充）

于 2013-04-03T19:55:43.233 回答
3

还有其他我应该期待的惊喜吗？

是的。您可以在 HTML5 规范中查找该pattern属性：

如果input元素具有pattern指定的属性，并且该属性的值在编译为禁用 、 和标志的 JavaScript 正则表达式时global（ignoreCase请multiline参阅 ECMA262 第 5 版，第 15.10.7.2 至 15.10.7.4 节），则编译成功，则生成的正则expression 是元素的编译模式正则表达式。

这很好，因为这意味着 JS 正则表达式将完全像 HTML 一样。

编译后的模式正则表达式在与字符串匹配时，必须将其开头锚定到字符串的开头，并将其结尾锚定到字符串的结尾。

注意：这意味着用于此属性的正则表达式语言与 JavaScript 中使用的相同，除了模式属性与整个值匹配，而不仅仅是任何子集（有点好像它^(?:在模式和)$最后一个）。

如您所见，仅添加^and$是不够的。例如，如果有人输入了一个析取A|B，那么^A|B$就不是正确的——它必须是^(A|B)$。

此外，您可能会注意到该pattern属性不适用于设置为 的输入multiple。

是否有一些功能完全按照模式属性实现？

您可以查看https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-forms以了解一些常见的 polyfill 库/插件，但我还没有测试任何符合标准的。

于 2013-04-03T20:00:53.647 回答
2

这种功能的本质可能类似于

function validate( el ) {
  // Check hasAttribute to avoid a regex like ^(?:null)$
  return el.value && el.hasAttribute( 'pattern' ) 
    ? new RegExp( '^(?:' + el.getAttribute( 'pattern' ) + ')$' ).test( el.value )
    : null
}

（IE 8+ 因为 hasAttribute）

尽管正确的验证实现还必须考虑其他因素，例如required属性的存在。有关更多详细信息，请参阅数据表单验证和 HTML5 表单填充程序，例如使 HTML5 表单向后兼容。

于 2013-04-03T20:05:31.733 回答