jQuery验证NANP电话号码 [英] jQuery validation of NANP Phone numbers

问题描述

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

I'm trying to validate my form. In my form is a phone number field. The user inserts a phone number and validation takes place as well as formatting. I've read a lot of the other similar questions in StackOverflow and through searches elsewhere, but I'm stuck. The form keeps saying that a valid number I insert is invalid.

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

I'm only concerned with NANP numbers and I understand the NANP numbers are formatted like this: NXX-NXX-XXXX, where N can only be digits [2-9], and X can be [0-9]. I don't need a country code.

这是我的代码:

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格式:

The idea is that no matter whether I insert 8012559553, (801)2559553, [phone], 801-255-9553 or something similar that it would be validated and formatted like this: [phone]. But again, the form for some reason continues to say that any number I insert is invalid, regardless of whether it's valid or not. This is code that I was using that was working, but didn't comply with NANP formats:

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

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

So, I'm having trouble implementing the regex test of the numbers to make sure that the numbers are real and then have the number formatted correctly... Any ideas?

推荐答案

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

The problem with your code is that regex1 is looking for special characters in the phone string. The code fails because you are stripping all special characters from the phone string in the line phone = phone.replace(/[^0-9]/g,'');, and thus when you do your test against regex1 you are looking for values that you already removed.

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

By all means, your approach is fine. Often I find it easier to use two simple REGEXs instead of trying to fit everything into one catch-all REGEX. Once you modify regex1 to only do a NANP validity check on a 10 digit number with no special characters, your code will work fine.

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

这篇关于jQuery验证NANP电话号码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！