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检查用户浏览器支持的内容。

Detecting HTML5 with Modernizr

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
    }
});

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

HTML5＆＃34;模式＆＃34;的Javascript后备<input />上的属性

3 个答案: