Question

<input id="phone" name="phone" placeholder="(XXX)XXX-XXXX" type="tel"
       pattern="^(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}$" required="true"/>

如何验证JavaScript中是否使用该模式用于不支持模式属性的浏览器？

感谢您的输入 - 我尝试过以下几个选项，但我似乎无法将任何内容描述为“真实” - RegExp适用于FireFox和Chrome的HTML模式字段。但是当我试图用它来使用javaScript时，它总是返回false？

http://pastebin.com/M0Pdn2Z3

Answer 1

有许多polyfills会在旧版浏览器中启用此功能：

nwxforms，没有依赖
HTML5 Form Shim，需要jQuery
h5Validate，也需要jQuery

我建议使用polyfilling - 这不会改变现代浏览器的行为，但会在旧版本中模仿它。（旁白：Modernizr polyfills list太棒了。）

你也可以自己写;其他一些答案显示了它是如何完成的。

Answer 2

创建一个onchange事件，该事件读取pattern属性并针对value运行。

// Only bind event if we need to
if(!('pattern' in document.createElement('input'))){
    // Bind the event
    document.getElementById('phone').addEventListener('change', function(){
        // Get the regex and value then test it
        var regex = new RegExp(this.pattern),
            val = this.value,
            valid = regex.test(val);

        // Is it valid?
        if(!valid){
            // Do something when it's not
        }
    });
}

Answer 3

您应该在提交表单时进行验证，或者从输入中失去焦点。

如果您使用jQuery，这将适用于具有pattern属性的所有元素：

$('[pattern]').each(function() {
    if (!$(this).val().match($(this).attr('pattern')))
        alert('Bad value');
});

如果没有，你可以为此做点什么（类似）：

var inputs = getElementsByName('input');
for (var index in inputs) {
    var input = inputs[index];
    var pattern = input.getAttribute('pattern');
    if (pattern != '' && pattern != null) {
        if (!input.value.match(pattern))
            alert('Bad value');
    }
}

这些将遍历具有模式的属性，以识别，检查它们，并在出现问题时提醒用户。当然，您可以将警报更改为您想要处理的任何方式（例如，返回false以取消表单提交）。

我没有测试过这段代码，但这就是它的要点。

Answer 4

您可以使用polyfill或将onchange事件添加到您的输入中。

document.getElementById('phone').addEventListener('change', function(){\
    // returns true if input matches regexp, otherwise it returns false
    var isValid = RegExp(this.pattern).test(this.value);
});

Answer 5

    var regex = /^(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}$/;
    if(phone.value.match(regex)){
        console.log('true');
    }else{
        console.log('false');
    }

我最终使用了这个......它奏效了。 @ _ @

如何在JavaScript中验证此正则表达式？

5 个答案: