<input> 上 HTML5 "pattern"属性的 Javascript 回退

Question

我正在使用 HTML5“模式”属性进行客户端验证(请不要告诉我服务器端验证，我有)。我想为使用没有“模式”支持的浏览器的用户使用 Javascript 或 jQuery 回退。这样做的好方法是什么？

这是一个示例输入元素:

<input type=tel name=contact[phone] id=phone required pattern=^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$>

Answer 1

在表单的 submit 事件(或任何地方)中，使用其现有的 pattern 属性对其进行验证。

var input = document.getElementsByName('contact[phone]')[0],
    isValid = input.value.search(new RegExp(input.getAttribute('pattern'))) >= 0;

jsFiddle .

您需要先检查浏览器兼容性，看看它是否支持 pattern 属性。你可以用 Modernizr 做到这一点.