jquery - jQuery验证NANP电话号码

我正在尝试验证我的表格。在我的表格中是电话号码字段。用户插入一个电话号码，然后进行验证以及格式化。我已经在StackOverflow中以及通过其他地方的搜索阅读了很多其他类似的问题，但是我陷入了困境。表格一直说我输入的有效号码无效。

我只关心NANP编号，我知道NANP编号的格式如下：NXX-NXX-XXXX，其中N只能是数字[2-9]，X可以是[0-9]。我不需要国家代码。

这是我的代码：

function validatePhone(){
    var error = 1;

    var hasError = false;
    var $this = $(this);
    var regex1 = /^(\()?[2-9]{1}\d{2}(\))?(-|\s)?[2-9]{1}\d{2}(-|\s)\d{4}$/;

    phone = $(this).val();
    phone = phone.replace(/[^0-9]/g,'');
    if(!regex1.test(phone)){
        hasError = true;
        $this.css('background-color','#FFEDEF');
    }
    else{
        area = phone.substring(0,3);
        prefix = phone.substring(3,6);
        line = phone.substring(6);
        $this.val('(' + area + ') ' + prefix + '-' + line);
        $this.css('background-color','#FFFFFF');
    }

这个想法是，无论我插入8012559553，（801）2559553，[phone]、801-255-9553还是类似的东西，它都会被验证并格式化为：[phone]。但是再次，由于某种原因该表格继续说我插入的任何数字都是无效的，无论它是否有效。这是我正在使用的代码，可以正常工作，但不符合NANP格式：

function validatePhone(){
    var error = 1;

    var hasError = false;
    var $this = $(this);
    phone = $(this).val();
    phone = phone.replace(/[^0-9]/g,'');
    if(phone.length != 10){
            hasError = true;
            $this.css('background-color','#FFEDEF');
    }
    else{
            area = phone.substring(0,3);
            prefix = phone.substring(3,6);
            line = phone.substring(6);
            $this.val('(' + area + ') ' + prefix + '-' + line);
            $this.css('background-color','#FFFFFF');
    }

因此，我在执行数字的正则表达式测试时遇到麻烦，以确保数字是真实的，然后正确格式化数字...有什么想法吗？

最佳答案

您的代码的问题是regex1在phone字符串中寻找特殊字符。代码失败是因为您要从行phone中的phone = phone.replace(/[^0-9]/g,'');字符串中删除所有特殊字符，因此，当对regex1进行测试时，您正在查找已删除的值。

无论如何，您的方法很好。通常，我发现使用两个简单的REGEX而不是将所有内容都放入一个通用的REGEX中会更容易。将regex1修改为仅对不带特殊字符的10位数字进行NANP有效性检查后，您的代码即可正常工作。

function validatePhone(){
    var error = 1;

    var hasError = false;
    var $this = $(this);
    var regex1 = /^([2-9]{1}\d{2})([2-9]{1}\d{2})\d{4}$/;

    phone = $(this).val();
    phone = phone.replace(/[^0-9]/g,'');
    if(!regex1.test(phone)){
        hasError = true;
        $this.css('background-color','#FFEDEF');
    }
    else{
        area = phone.substring(0,3);
        prefix = phone.substring(3,6);
        line = phone.substring(6);
        $this.val('(' + area + ') ' + prefix + '-' + line);
        $this.css('background-color','#FFFFFF');
    }