如何在 JavaScript 中验证这个正则表达式？答案

【问题标题】：How do I validate this regex in JavaScript?如何在 JavaScript 中验证这个正则表达式？
【发布时间】：2013-12-18 15:13:21
【问题描述】：

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

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

感谢您的输入——我尝试了以下几个选项，但我似乎无法找到任何“真实”的信息——RegExp 适用于 FireFox 和 Chrome 的 HTML 模式字段。但是当我尝试将它与 javaScript 一起使用时，它总是返回 false？

http://pastebin.com/M0Pdn2Z3

【问题讨论】：

处理change事件，获取pattern属性，运行正则表达式。你在哪个环节遇到了问题？你试过什么？

标签： javascript regex html validation

【解决方案1】：

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

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

我建议使用 polyfill——这不会改变现代浏览器的行为，但会在旧浏览器中模拟它。（顺便说一句：Modernizr polyfills list 太棒了。）

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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 以取消表单提交）。

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

【讨论】：

【解决方案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);
});

【讨论】：

【解决方案5】：

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

我刚刚使用了这个……它奏效了。 @_@

【讨论】：