Question

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

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

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

使用类似

的内容

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

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

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

Answer 1

添加^和$或多或少与pattern属性完全一致。根据HTML 5（http://www.w3.org/html/wg/drafts/html/master/forms.html#the-pattern-attribute）中pattern的w3c规范的最新版本：

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

（强调补充）

Answer 2

我还有其他惊喜吗？

是。您可以查找pattern attribute in HTML5 spec：

如果input元素指定了pattern属性，并且属性的值，则在编译为包含global的JavaScript正则表达式时，ignoreCase ，并禁用multiline标志（参见ECMA262第5版，第15.10.7.2至15.10.7.4节），编译成功，然后生成的正则表达式是元素的编译模式正则表达式。

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

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

注意：这意味着用于此属性的正则表达式语言与JavaScript中使用的正则表达式语言相同，只是模式属性与整个值匹配，而不仅仅是任何子集（有点像它隐含了{{ 1}}在模式的开头，最后是^(?:。

如您所见，仅添加)$和^是不够的。例如，如果某人输入了分离$，那么A|B将不正确 - 它必须是^A|B$。

您也可能会注意到^(A|B)$属性不适用于设置为pattern的输入。

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

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

Answer 3

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

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属性的存在。有关详细信息，请参阅Data form validation和HTML5表单填充程序，例如Making HTML5 Form backwards compatible。

使用javascript正确模拟“pattern”属性

3 个答案: