我正在尝试使用 javascript 复制 html5 模式属性,但结果不一致。
模式是[a-zA-Z\. \']+
在 Chrome 中,键入“asd 123”不会通过测试。
使用类似的东西
el.value.match(new RegExp(el.pattern))
让“asd 123”通过,显然是因为“asd”是匹配的。
^
我可以通过在我的模式的开头和结尾添加和来解决这个特定问题$
,但问题是 - 是否有一些功能完全按照模式属性实现?还有其他我应该期待的惊喜吗?
我正在尝试使用 javascript 复制 html5 模式属性,但结果不一致。
模式是[a-zA-Z\. \']+
在 Chrome 中,键入“asd 123”不会通过测试。
使用类似的东西
el.value.match(new RegExp(el.pattern))
让“asd 123”通过,显然是因为“asd”是匹配的。
^
我可以通过在我的模式的开头和结尾添加和来解决这个特定问题$
,但问题是 - 是否有一些功能完全按照模式属性实现?还有其他我应该期待的惊喜吗?
添加^
并且$
或多或少地将其完全作为pattern
属性实现。pattern
根据HTML 5 ( http://www.w3.org/html/wg/drafts/html/master/forms.html#the-pattern-attribute )中 w3c 规范的最新版本:
这意味着用于该属性的正则表达式语言与 JavaScript 中使用的相同,除了模式属性与整个值匹配,而不仅仅是任何子集(有点好像它在开头暗示了一个 ^(?:的模式和 )$ 最后)。
(重点补充)
还有其他我应该期待的惊喜吗?
是的。您可以在 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 库/插件,但我还没有测试任何符合标准的。
这种功能的本质可能类似于
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 表单向后兼容。