NANP电话号码的jQuery验证

时间:2011-08-02 16:55:05

标签: jquery validation phone-number

我正在尝试验证我的表单。在我的表格中是电话号码字段。用户插入电话号码并进行验证以及格式化。我在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,(801)255-9553,801-255-9553还是类似的东西,它都会被验证和格式化如下:(801)255-9553 。但同样,表格由于某种原因继续说我插入的任何数字都是无效的,无论它是否有效。这是我正在使用的代码,但不符合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');    
    }

所以,我在实现数字的正则表达式测试时遇到了麻烦,以确保数字是真实的,然后将数字格式正确...有什么想法吗?

2 个答案:

答案 0 :(得分:3)

这是我不是很严格但很好的RegExp:

/^\D*([2-9]\d{2}\D*){2}(\d{2}\D*){2}\D*$/

它接受:

  • (235)-546-42-09
  • 452-845-12-12
  • [933] -323-34-53
  • 222-435-0903
  • 222-4350903
  • 2224350903
  • (222) - 785 - 12 - 76

不接受:

  • 111-342-45-45
  • 234-111-50-78
  • 222-222-222-2(您可以简单地修改RegExp以删除它)

答案 1 :(得分:2)

您的代码存在的问题是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');    
    }