Praca z numerami telefonów w kodzie JavaScript

Jednym z głównych problemów, z którymi napotykają programiści we wczesnym rozwoju, jest sposób pobierania danych od użytkownika, a następnie zweryfikowania tych danych. Jeśli przyjmujesz dane wejściowe, takie jak nazwa lub numer rejestracyjny od użytkownika, możesz łatwo zweryfikować te dane, staje się ono nieco złożone, gdy przyjmujesz dane wejściowe jako numer telefonu.

W tym poście przejdziemy do sposobu przyjęcia numeru telefonu jako danych wejściowych od użytkownika, a następnie zweryfikujemy go zgodnie z naszymi potrzebami w tym poście za pomocą znacznika wejściowego HTML5 z Tel Type, a następnie za pomocą prostego znacznika wejściowego HTML i sprawdzanie sprawdzania go sami używają JavaScript.

Za pomocą znacznika wejściowego HTML5 z Tel Type

Możemy użyć znacznika wejściowego HTML5, aby przejąć dane wejściowe od użytkownika i możemy podać rodzaj teren w znaczniku wejściowym, aby poinformować przeglądarkę, że to pole wejściowe powinno wziąć numer telefonu. Typ wejściowy HTML5 ma pewne zalety, że możemy ustawić wymagany atrybut w znaczniku wejściowym informując przeglądarkę, że użytkownik nie może kontynuować bez wprowadzania numeru telefonu, a drugim jest to, że możemy ustawić atrybut wzorca. Pokazajmy znacznik wejściowy w HTML:

W powyższym kodzie widzimy, że podaliśmy wyrażenie regularne jako wzorze. Zobaczmy odpowiedni program HTML:

Przykład: 123-456-7890

Składać

W powyższym kodzie zainicjowaliśmy znacznik etykiety, który pokazuje przykład numeru telefonu, który jest akceptowany przez poniższy znacznik wejściowy, w którym zdefiniowaliśmy wzór. Teraz sam znacznik wejściowy będzie odpowiedzialny za sprawdzanie poprawności danych wejściowych od użytkownika. Następnie zdefiniowaliśmy przycisk i daliśmy mu rodzaj przycisku. Ilekroć użytkownik kliknie składać przycisk wygeneruje odpowiedź na podstawie akcji znacznika formularza. Niektóre przykłady są poniżej:

Jeśli klikniemy przycisk Prześlij, pozostawiając pole wejścia numeru telefonu pustego:

Jeśli podamy zły wzór i kliknij przycisk Prześlij, zobaczymy następujące ostrzeżenie:

Korzystanie z JavaScript do weryfikacji numeru telefonu

Możemy również zweryfikować numer telefonu za pomocą JavaScript. W tym momencie utworzymy znacznik wejściowy i przycisk w HTML w następujący sposób:

Przykład: 123-456-7890

Składać

Użyliśmy zdarzenia OnClick na elemencie przycisku, co oznacza, że ​​za każdym razem, gdy użytkownik kliknie przycisk Prześlij, funkcja Handleclick () rozpocznie wykonywanie. Ta funkcja Handleclick () zostanie zainicjowana w osobnym pliku kod.JS Do których wspominaliśmy za pomocą scenariusz znacznik widoczny w powyższym kodzie.

Pracujmy teraz nad częścią JavaScript:

// funkcja do obsługi kliknij przycisk Prześlij
const Handleclick = () =>
// Uzyskanie odniesienia do wprowadzania MyPhone
var input = dokument.GetElementById („Myphone”).wartość;
// format numeru telefonu
var format = /^\ (?([0-9] 3) \)?[-]?([0-9] 3) [-]?([0-9] 4) $/;
// Instrukcje warunkowe
if (input === ")
Alert („Wprowadź numer telefonu”)

W przeciwnym razie if (wejście.mecz (format))
alert („Numer telefonu:”+ wejście);

w przeciwnym razie
alert („Typ za pomocą poprawnego formatu”);

W powyższym kodzie najpierw zainicjowaliśmy funkcję Handleclick (), a następnie odwołujemy się do wartości znacznika wejściowego. Następnie definiujemy format numeru telefonu, który chcemy za pomocą wyrażeń regularnych. W tym przypadku przyjęty przykład numer telefonu byłby 123-456-7890. Następnie używamy instrukcji warunkowych i sprawdzamy, czy wejście jest puste, to alert Wprowadź numer telefonu W przeciwnym razie, jeśli wejście pasuje do formatu, ostrzegaj ten numer w przeciwnym razie ostrzega, że ​​liczba ma typy, jest w niewłaściwym formacie. Zobaczmy wyjście jeden po drugim:

Najpierw klikniemy przycisk Prześlij, pozostawiając pole wejściowe puste:

Następnie wpiszemy niewłaściwy numer formatu, wówczas zobaczymy następujące dane wyjściowe:

Ostatecznie wybierzmy się do właściwego formatu i zobaczmy wyjście:

Wniosek

Sprawdzanie poprawności numerów telefonów w JavaScript może stać się bólem głowy dla nowego programisty. Istnieją dwie metody, których możemy użyć do weryfikacji numerów telefonów. Po pierwsze, aby wziąć udział od użytkownika za pomocą znacznika wejściowego HTML. Obok weryfikacji numeru telefonu Podajemy tag wejściowy typ Tel i wzór, do którego powinien on sprawdzić sprawę. Drugą metodą jest tworzenie niestandardowego programu JavaScript, który weryfikuje Twój numer telefonu zgodnie z danym formatem podanym jako wyrażenie regularne.

W tym poście nauczyliśmy się, jak wziąć numer telefonu jako dane wejściowe od użytkownika, a następnie sprawdziliśmy ten numer telefonu za pomocą dwóch metod; Tag wejściowy HTML5 z Tel Type i niestandardową logiką JavaScript.