<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做到这一点.