适当模拟“模式”属性

Properly simulate "pattern" attribute with javascript

本文关键字：属性 模式 模拟      更新时间：2023-09-26

我试图用javascript复制html5模式属性，但得到不一致的结果。

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

在Chrome中，输入"asd 123"无法通过测试。

使用类似

的东西
el.value.match(new RegExp(el.pattern))

允许"asd 123"通过，显然是因为"asd "是匹配的。

我可以通过将^和$添加到我的模式的开始和结束来解决这个特定的问题，但问题是-是否有一些函数在那里被实现为模式属性?还有其他惊喜吗?

还有其他惊喜吗?

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

如果一个input元素指定了一个pattern属性，并且该属性的值在被编译为一个JavaScript正则表达式并禁用了global、ignoreCase和multiline标志(参见ECMA262第5版，15.10.7.2到15.10.7.4节)时编译成功，那么得到的正则表达式就是该元素编译后的模式正则表达式。

这很好，因为这意味着JS正则表达式将与HTML正则表达式完全相同。

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

注意:这意味着用于该属性的正则表达式语言与JavaScript中使用的相同，除了模式属性是针对整个值匹配的，而不仅仅是针对任何子集(有点像它暗示了模式开始时的^(?:和结束时的)$)。

可以看到，仅仅添加^和$是不够的。例如，如果有人输入了一个分离A|B，那么^A|B$就不正确-它需要是^(A|B)$。

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

是否有一些函数在那里被实现为模式属性?

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

添加^和$或多或少与pattern属性完全相同。根据最新版本的w3c规范pattern在HTML 5 (http://www.w3.org/html/wg/drafts/html/master/forms.html#the-pattern-attribute):

这意味着用于此属性的正则表达式语言与JavaScript中使用的正则表达式语言相同，只是模式属性是针对整个值匹配的，而不仅仅是针对任何子集(有点像它暗示了^(?.

(重点)

这样一个函数的本质可能类似于

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+ because of hasAttribute)

虽然正确的验证实现还必须考虑其他因素，例如required属性的存在。详细信息请参见数据表单验证和HTML5表单shims(例如使HTML5表单向后兼容)。

相关文章：