Strona główna kursu

JavaScript - sprawdzanie poprawności adresu e-mail, długości ciągu, zaznaczanie pola formularza, zliczanie znaków, ograniczenie znaków w formularzu, wyrażenia regularne

DZIAŁANIE:

Sprawdzanie adresu e-mail :

Podaj maila : |

Sprawdzenie długości ciągu :

Podaj maila : |

Sprawdzenie czy podano liczbę :

Podaj liczbę : |

Zaznaczanie zawartości pola formularza :


Zliczanie znaków :


Ograniczenie znaków pola textarea :


 

Kod:

Kurs JavaScript, Kurs Ajax, Kurs PHP

Ewentualne Objaśnienia:

Tutaj przedstawiam wam kilka naprawdę praktycznych przykładów zastosowanie JS z formularzami.
Omówię troszeczkę każdy z przykładów :

Sprawdzanie poprawności e-mail :
Przykład ten opiera się na wyrażeniach regularnych, nie będę po raz kolejny tłumaczył tego zagadnienia, odsyłam do takiego niemalże przykładu (walidacja e-mail), ale w moim kursie PHP, gdzie również wytłumaczyłem istotne sprawy związane z wyrażeniami regularnymi, wejdź TUTAJ ! W PHP stosowaliśmy ereg, eregi lub preg_match tutaj mamy match - sprawdzamy czy zmienna mail odpowiada wyrażeniu zapisanemu w zmiennej wzor. Jeśli tak nie jest match zwraca NULL . Match można również użyć do sprawdzenia czy dana zmienna zawiera jakiś ciąg znaków. Więcej znajdziesz pod : http://www.w3schools.com/jsref/jsref_match.asp .

Sprawdzanie długości podanego ciągu :
To jest bardzo prosty przykład, zastosowane w nim metody doskonale już znacie więc nie będę tego omawiał szczegółowo.

Sprawdzanie czy podano liczbę :
Tutaj nowością jest funkcja isNan - jeżeli wywołamy funkcję parseInt (znacie już ją) z parametrem, który nie jest liczbą zostanie zwrócona wartość Not a Number (NaN). No właśnie tutaj sobie sprawdzamy w tej sposób czy w formularzu podano liczbę.

Zaznaczenie zawartości pola formularza :
Tutaj ustawiamy sobie zaznaczenie zawartości pola textarea po kliknięciu na przycisk (jego akcja onClick). Jak widzicie na listingu kodu w momencie kliknięcia wykonywane są dwie instrukcje javascript:this.form.text.focus() oraz this.form.text.select() . Focus jak zapewne się domyślacie (znając choćby CSS) powoduje przejście do pola (tutaj o nazwie text). Następnie dla tego pola jest wywołane select() co jak nietrudno się domyślić powoduje zaznaczenie tekstu

Zliczanie wpisanych znaków :
Tutaj korzystamy ze zdarzenia onkeyup - czyli zdarzenie związane z klawiaturą, a dokładnie zwolnienie jakiegoś klawisza (nie trudno się domyślić, że istnieje również zdarzenie onkeydown). W momencie wywoływana jest odpowiednia funkcja, która w pole tekstowe wpisuje ile wpisano już znaków w pole textarea.

Ograniczenie wpisanych znaków :
Ponownie korzystamy z onkeyup. Wywołujemy funkcję, w której jaka parametr pokazujemy, że max długość wpisanego ciągu znaków to 25. Funkcja sprawdza czy nie przekroczono tej wartości, jeśli tak pojawia się alert oraz pole textarea jest blokowane (właściwość disabled na true) . W przeciwnym razie obliczana jest różnica między max długością, a już wpisaną co daje nam liczbę znaków jakie jeszcze można wpisać. Wartość ta jest wyświetlana w polu tekstowym.