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

Question

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

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

谢谢您的输入-我尝试了以下几种方法，但似乎找不到“ true”的东西-RegExp在FireFox和Chrome的HTML模式字段中有效。 但是，当我尝试将其与javaScript一起使用时，它总是返回false？

http://pastebin.com/M0Pdn2Z3

Answer 1

有许多polyfill可以在较旧的浏览器中启用此功能：

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

我建议使用polyfilling-这不会改变现代浏览器的行为，但会在旧的浏览器中模拟它。 （ 顺便说一句 ： Modernizr polyfills列表很棒。）

您也可以自己编写； 其他一些答案则说明了如何完成。

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

我刚结束使用了它。 @ _ @