HTML5的Javascript回退；“模式”；属性在<；输入>；

我使用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+))?$>

---

在表单（或任何位置）的

提交事件上，使用其现有的
模式
属性对其进行验证

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


您需要首先检查浏览器兼容性，看看它是否支持
模式
属性。您可以使用。
检查用户浏览器支持的内容


Modernizer允许您执行以下操作：

if (Modernizr.canvas) {
  // let's draw some shapes!
} else {
  // no native canvas support available :(
}

我最好的猜测是，首先有一个使用jQuery查找浏览器和版本的函数，并将其匹配到是否支持模式，然后执行以下操作

$("#element").onChange(function()
{
    if(doesNotSupportPattern())
    {
        var pattern = $(this).prop('pattern');
    if(!$(this).val().match(pattern)))
        {
            //Code to make form invalid
        }
    }
});

或者类似的东西


改变计划，这不是办法

$("#form").submit(function()
{
    var valid = true;
    $(this).find('input').each(function()
    {
        if(!$(this).prop('pattern'))
            continue;

        if(!$(this).val().match($(this).prop('pattern')))
            valid = false;
    });

    if(!valid)
    {
        //invalidate form
    }
});

这样会更好。通过这种方式，它将为每个元素触发，并且更紧凑，如果模式被启用，它无论如何都不会干扰，因为它应该只在所有匹配时提交，如果它不匹配，那么表单无论如何都将无效
我想您希望
更改
，而不是
一旦更改
。您需要将
RegExp
对象传递给
匹配（）
，而不是
字符串
。示例Modernizer代码if（modernizer.input.pattern==false）{//回退到您自己的解决方案}