HTML5“模式”属性的Javascript后备<input>

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

Answer 2

您可以使用Modernizr检查用户浏览器支持的内容。

使用Modernizr检测HTML5

Modernizer可以让你做这样的事情：

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

Answer 3

我最好的猜测是首先使用一个函数，使用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
    }
});

会更好。 这样它会触发每个元素，并且它更紧凑，如果启用了模式，它也不会干涉，因为它只应提交，如果它全部匹配，如果不匹配，表单无论如何都会失效