Popraw numer telefonu za pomocą javascript

To wyrażenie regularne /^(\([0-9]{3}\)\s*|[0-9]{3}\-)[0-9]{3}-[0-9]{4}$/ sprawdza wszystkie z następujących wartości:

'123-345-3456';
'(078)789-8908';
'(078) 789-8908'; // Note the space

Rozbić to, co się dzieje:

1. grupa na początku waliduje na dwa sposoby, (XXX) lub XXX-, z opcjonalnymi spacjami po nawiasie zamykającym.
2. część po sprawdzeniu grupowym dla XXX-XXX

Oto Jak to robię.

function validate(phone) {
  const regex = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
  console.log(regex.test(phone))
}

validate('1234567890')     // true
validate(1234567890)       // true
validate('(078)789-8908')  // true
validate('123-345-3456')   // true

Jest to zdecydowanie najprostszy sposób, jaki znalazłem, aby użyć JavaScript regex, aby sprawdzić format numeru telefonu. ten konkretny przykład sprawdza, czy jest to liczba 10-Cyfrowa.

<input name="phone" pattern="^\d{10}$" type="text" size="50">

Pole wejściowe jest oznaczane po kliknięciu przycisku submit, jeśli wzorzec nie pasuje do wartości, inne css lub js nie są wymagane.

Czy ktoś może wyjaśnić dlaczego

Ponieważ twoje Wyrażenie regularne pasuje do danych wejściowych. Chodzi o to, że wejście zawiera również Dodatkowe znaki. Dodałeś '^', aby oznaczać początek linii, ale (jak powiedział Andy) powinieneś dodać'$', aby oznaczać koniec linii.

Jeśli zaczniesz swoje Wyrażenie regularne od '^' i zakończysz je na'$', to będzie pasować tylko do linii, które pasują Tylko do twojego wyrażenia regularnego.

Rozpoczynając regex od'^', A nie kończąc na'$', dopasowujesz linie rozpoczynające się sekwencją pasującą do twojego wyrażenia regularnego, ale linie mogą mieć wszystko inne kończące pasującą sekwencję.

Możesz użyć tej wtyczki jquery:

Http://digitalbush.com/projects/masked-input-plugin/

Patrz zakładka demo, opcja telefonu.

Czy ktoś może wyjaśnić dlaczego??

Dzieje się tak, ponieważ wyrażenie regularne nie kończy się żadnym meta-znakiem kotwicy, takim jak koniec linii $ lub granica słowa \b.

Więc kiedy zapytasz silnik regex, czy {[2] } jest prawidłowym numerem telefonu, spróbuje znaleźć dopasowanie w tym łańcuchu, więc pasuje 123- z tą częścią (\([0-9]{3}\) |[0-9]{3}-) Następnie pasuje 345- z tą częścią [0-9]{3}- Następnie pasuje 3456 z tą częścią [0-9]{4}.

Teraz silnik stwierdza, że przeszedł cały regex i znalazł łańcuch wewnątrz wejścia, który pasuje do regex, chociaż znak został pozostawiony - liczba 7 - w łańcuchu wejściowym, więc zatrzymuje się i zwraca success, ponieważ znalazł pod-łańcuch, który pasuje.

Jeśli umieściłeś $ LUB \b na końcu regex, silnik idzie w ten sam sposób, co wcześniej, próbuje dopasować $ lub \b , ale znajduje ostatnią liczbę - 7- i nie jest to granica wyrazów \b ani koniec linii $, więc zatrzymuje się i nie znajduje dopasowania.

^(\(?[0-9]{3}\)?)((\s|\-){1})?[0-9]{3}((\s|\-){1})?[0-9]{4}$

Najpierw zezwalamy na 0 LUB 1 otwarty nawias \(?

Następnie pozwalamy na 3 kolejne cyfry w przedziale 0-9 [0-9]{3}

Następnie powtarzamy pierwszy krok i zezwalamy na 0 LUB 1 nawias zamykający \)?

Dla drugiej grupy zaczynamy od dopuszczenia spacji lub myślnika 0 LUB 1 razy ((\s|\-){1})?

Powtarza się to pomiędzy drugą a trzecią grupą liczb i sprawdzamy przez 3 kolejne cyfry, a następnie cztery kolejne cyfry, aby go zakończyć. Dla nas numery telefonów myślę, że to obejmuje podstawy dla wielu różnych sposobów, że ludzie mogą sformatować numer, ale jest na tyle restrykcyjne, że nie mogą przejść nieuzasadnione ciąg.

W JavaScript, poniższe Wyrażenie regularne może być użyte dla numeru telefonu:

^((\+1)?[\s-]?)?\(?[1-9]\d\d\)?[\s-]?[1-9]\d\d[\s-]?\d\d\d\d

Np. 9999875099, 8750999912 itd.

Odniesienie: https://techsolutions.filebizz.com/2020/08/regular-expression-for-phone-number-in.html

Dodaj granicę słowa \b na końcu wyrażenia regularnego:

/^(\([0-9]{3}\) |[0-9]{3}-)[0-9]{3}-[0-9]{4}\b/

Jeśli spacja po {[3] } jest opcjonalna:

/^(\([0-9]{3}\)\s*|[0-9]{3}-)[0-9]{3}-[0-9]{4}\b/

Dodaj $ na końcu wyrażenia regularnego, aby oznaczać koniec wzorca:

var regExp = /^(\([0-9]{3}\)\s?|[0-9]{3}-)[0-9]{3}-[0-9]{4}$/;

Jeśli używasz znacznika input, ten kod ci pomoże. Piszę ten kod sam i myślę, że jest to bardzo dobry sposób na wykorzystanie w input. ale możesz go zmienić za pomocą swojego formatu. Pomoże to użytkownikowi poprawić ich format na znaczniku wejściowym.

$("#phone").on('input', function() {  //this is use for every time input change.
        var inputValue = getInputValue(); //get value from input and make it usefull number
        var length = inputValue.length; //get lenth of input

        if (inputValue < 1000)
        {
            inputValue = '1('+inputValue;
        }else if (inputValue < 1000000) 
        {
            inputValue = '1('+ inputValue.substring(0, 3) + ')' + inputValue.substring(3, length);
        }else if (inputValue < 10000000000) 
        {
            inputValue = '1('+ inputValue.substring(0, 3) + ')' + inputValue.substring(3, 6) + '-' + inputValue.substring(6, length);
        }else
        {
            inputValue = '1('+ inputValue.substring(0, 3) + ')' + inputValue.substring(3, 6) + '-' + inputValue.substring(6, 10);
        }       
        $("#phone").val(inputValue); //correct value entered to your input.
        inputValue = getInputValue();//get value again, becuase it changed, this one using for changing color of input border
       if ((inputValue > 2000000000) && (inputValue < 9999999999))
      {
          $("#phone").css("border","black solid 1px");//if it is valid phone number than border will be black.
      }else
      {
          $("#phone").css("border","red solid 1px");//if it is invalid phone number than border will be red.
      }
  });

    function getInputValue() {
         var inputValue = $("#phone").val().replace(/\D/g,'');  //remove all non numeric character
        if (inputValue.charAt(0) == 1) // if first character is 1 than remove it.
        {
            var inputValue = inputValue.substring(1, inputValue.length);
        }
        return inputValue;
}

/^1?\s?(\([0-9]{3}\)[- ]?|[0-9]{3}[- ]?)[0-9]{3}[- ]?[0-9]{4}$/

To potwierdzi wszystkie numery stylów amerykańskich, z lub bez 1, i z lub bez nawiasu na kodzie obszaru (ale jeśli jest używany, używany poprawnie. (902-455-4555 nie będzie działać, ponieważ nie ma nawiasu zamykającego. pozwala również na albo-lub odstęp między zestawami, jeśli jest to pożądane.) Będzie działać na przykładach podanych przez op.

function validatePhone(inputtxt) {
  var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
  return phoneno.test(inputtxt)
}