javascript - 为什么这个 JavaScript RegExp 会导致双重答案？

Question

看看这个简单的 HTML input 标签:

<input type='text' id='phoneNumber' name='phoneNumber' class='inputBig textLeft'
data-validation='required regex' 
data-validation-regex-pattern='^\\+\\d{2}\\.\\d{10}$'
value='+98.2188665544' />

<p id='log'></p>

现在假设我们想要验证这个字段，使用这个函数:

var log = $('#log');
function validateRegex(field) {
    var pattern = field.attr('data-validation-regex-pattern');
    log.append(pattern + '<br />');
    if (pattern && pattern != '') {
        var isValid = new RegExp(pattern).test(field.val().trim());
        if (!isValid) {
            log.append('not valid<br />');
        }
        else {
            log.text('valid<br />');
        }
    }
}
validateRegex($('#phoneNumber'));
var isValid = new RegExp('^\\+\\d{2}\\.\\d{10}$').test($('#phoneNumber').val());
log.append(isValid.toString());

现在，如果您查看日志，您会看到此行返回 false:

var isValid = new RegExp(pattern).test(field.val().trim());

但是，这行代码返回 true:

new RegExp('^\\+\\d{2}\\.\\d{10}$').test($('#phoneNumber').val().trim());

换句话说，当 RegExp 对象的模式作为字符串变量传递给它时，它不起作用。但是当你传递一个字符串文字时，它就起作用了。

为什么？这里有什么问题吗？

要查看实际效果，请查看此 fiddle .

Answer 1

转义反斜杠仅适用于 JavaScript，对于 HTML 则不是必需的。因此，以下属性字符串:

data-validation-regex-pattern='^\+\d{2}\.\d{10}$'

将正常工作:

Updated fiddle: http://jsfiddle.net/AndyE/GRL2m/6/