JQuery проверки номеров телефонов NANP - PullRequest
Новая
       13

JQuery проверки номеров телефонов NANP

2 голосов
/ 02 августа 2011

Я пытаюсь подтвердить свою форму. В моей форме это поле номера телефона. Пользователь вводит номер телефона, и выполняется проверка, а также форматирование. Я читал много других подобных вопросов в 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 ]

3 голосов
/ 02 августа 2011

Вот мой не очень строгий, но все же приятный 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, чтобы удалить это)
2 голосов
/ 02 августа 2011

Проблема с вашим кодом в том, что regex1 ищет специальные символы в строке phone. Код не выполняется, потому что вы удаляете все специальные символы из строки phone в строке phone = phone.replace(/[^0-9]/g,'');, и, таким образом, когда вы выполняете тест по regex1, вы ищете значения, которые вы уже удалили.

В любом случае, ваш подход в порядке. Часто мне проще использовать два простых REGEX вместо того, чтобы пытаться уместить все в один универсальный REGEX. После того, как вы измените regex1, чтобы проверять достоверность NANP только для 10-значного числа без специальных символов, ваш код будет работать нормально. 

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