Walidacji formularza Javascript – robi to dobrze

23 Feb 10:44 am


Original: http://sbpoley.home.xs4all.nl/webmatters/formval.html

Przy użyciu JavaScript do walidacji formularza jest właściwy sposób, źle, bardzo źle sposób i samobójczo niewłaściwy sposób! Niestety wiele stron, należy użyć jednej z niewłaściwych sposobów, w tym także takie, które twierdzą, że są formą walidacji-tutoriale. Ta strona stara się pomóc ludziom w dobrym kierunku.

Samobójczo niewłaściwy sposób, to uzyskanie potwierdzenia w JavaScripcie tylko, a nie na serwerze. Złośliwy użytkownik może łatwo obejść je i – w zależności od tego, co robisz – może siać spustoszenie z bazą danych. Podobno zdarzały się przypadki sklepów internetowych komputery wysyłki za $ 1, ponieważ nie mieli walidację po stronie serwera!
Bardzo źle (ale zbyt często) sposobem jest po prostu założyć, że użytkownik ma Javascript. Czytelnicy, którzy wyłączyli go (i istnieje wiele dobrych powodów, dla których to czyni), lub którzy nie mają one dostępne, spędzają czas wypełniania formularza, a następnie znaleźć nic się nie stało, gdy kliknij przycisk Prześlij.
Niewłaściwy sposób jest dać zakaz Javascript użytkownika, lub użytkownik przeglądarki innej niż Internet Explorer, lakoniczny komunikat informujący go, że nie można korzystać z witryny.
Właściwy sposób (tam w końcu!) Jest użycie JavaScript jako opcja dodatkowa do poprawy obsługi. Wszystkie zgłoszenia są sprawdzane formularza na serwerze. Jeśli czytelnik ma Javascript dostępny, początkowe zatwierdzenie odbywa się na kliencie, aby sprawdzić prostych błędów, takich jak brakujące informacje, lub nie-numerycznych znaków w polu numerycznym. Oznacza to, że czytelnik dostaje szybsze zwrotne niż oczekiwania na odpowiedź od serwera.

Istotą jest więc, że walidacja JavaScript jest zawsze dobrowolne. Ponieważ zatwierdzenie musi być na serwerze tak, to jest głupie nalegać, że użytkownik musi mieć Javascript. Dodawanie walidacji Javascript powinien pomóc niektórych czytelników i utrudniają nikogo.

Mimo, że tak naprawdę są dwie prawe sposoby, z których jeden jest lepszy prawie nigdy nie używane!

Dopuszczalne: zatwierdzić wprowadzone dane, gdy przycisk submit jest wciśnięty.
Lepiej w większości przypadków, zwłaszcza z dużych form: zatwierdzenia na pole po polu podstawie i ponownie zatwierdzać cały formularz, gdy przycisk submit przycisku. To również sprawia, że ​​łatwo ostrzega użytkownika w przypadku, gdy wprowadzone dane jest być może, ale na pewno nie, błędne – np. nietypowych znaków w wiadomości e-mail, lub rok urodzenia 1907.

Przykład

Oto przykład, jak Javascript walidacja powinna działać. (Zauważ, że to tylko demonstracja,. Nie jest przeznaczony jako drop-in skrypt, a cokolwiek robisz niewątpliwie mają swoje własne wymagania)

W rzeczywistości nie ma żadnego skryptu serwera, więc coś wpiszesz będą odrzucane na przedstawienia. Wypróbuj zarówno Javascript włączona i wyłączona.

 

Jak to działa?

Nie będę opisywać funkcjonowanie w szczegółach, ponieważ są one w rozsądnym skomentował szczegółowo w kodzie. Jeśli nie jesteś zaznajomiony z podstawami Javascript i formy, jest wiele miejsc w sieci, które mogą pomóc. Zamiast wskażę najważniejsze cechy tego podejścia.

Używa standardowego przycisku Wyślij i przewodnika onsubmit, dlatego składanie wciąż działa, jeśli użytkownik nie ma Javascript niedostępna.
Walidacja jest wykonywana przez onchange obsługi, więc użytkownik otrzymuje natychmiastową informację zwrotną na każdym polu. (Nie onblur, co może prowadzić do przedwczesnego walidacji jeśli np. pop-up odpala lub użytkownik chce skopiować dane z innych źródeł.) Wezwania do sprawdzających są powtarzane w onsubmit obsługi, w przypadku, gdy użytkownik pomijane niektóre pola.
To sprawia, że ​​minimalne użycie alarmowych polach: błędy są zapisywane w kodzie HTML. Użytkownik nie jest napędzany na ścianę przez pól alarmowych dla każdego błędu, a komunikat o błędzie jest nadal widoczny, dopóki on / ona zakończyła korektę ostrości.
Jedno powiadomienie wyskakuje jeśli użytkownik kliknie “Wyślij”, podczas gdy nie są jeszcze błędy. Jest to konieczne, aby dać pozytywne opinie.
Skrypt sprawdza dla starszych przeglądarek i mniej zamożnych przeglądarek. To nie wyklucza ich, wręcz przeciwnie, jest to, aby zapewnić, że użytkownicy tych przeglądarek mogą również skorzystać z formularza – po prostu trzeba czekać do walidacji wykonywanych przez serwer.
Wykrycie tych starszych przeglądarek dokonuje detekcji funkcja nie, przeglądarki wąchania – to jest dużo bardziej niezawodny (i prostsze, jak dobrze!). Na przykład, metody skrypt sprawdza, czy są takie jak zdefiniowane document.getElementById zamiast sprawdzania czy przeglądarka podaje Firefox.
Formatowanie błędu i komunikatów alarmowych odbywa się poprzez ustawienie klasy CSS danego elementu. To jest zarówno prostszy i utrzymaniu niż za pomocą znaczników FONT lub ustawienie właściwości CSS bezpośrednio.

Jedno, czego nie zrobiłeś pakowany jest pozytywny OK wskazanie przez pola, kiedy przechodzą walidację. Mam wrażenie, że to może być mylące, ponieważ jeden tylko nie wie, że dziedzina ta jest OK po walidacji serwer jest kompletne. Jednak w niektórych przypadkach może to być warto.

Jedna rzecz nie zrobiłem, co jest rzadko, jeśli kiedykolwiek pomysł dobry, jest zmuszenie użytkownika do zakończenia pola w określonej kolejności, lub w celu zapobiegania jego / ją do opuszczenia pola, dopóki nie jest prawidłowe. Zrobić użyj funkcji ostrości, aby pomóc użytkownikowi, ale on / ona jest bezpłatna, aby przejść do innego pola, jeśli chcesz.
Automatyczne uzupełnianie problemem

Jest jeden mały problem, że para korespondentów zwracają uwagę na mnie. Jest to błąd w przeglądarce Internet Explorer (wszystkie wersje, a ile wiem), w którym zdarzenie onChange nie ognia, gdy użytkownik korzysta z automatycznego zakończenia. Nie, nie wydaje się być dobrym sposobem wokół tego. (Znalazłem kilka miejsc nawiązujących do niestandardowego zdarzenia onPropertyChange, ale to pożary na każde naciśnięcie klawisza, więc nie jest z jakiegokolwiek użytkowania.)

Jedyną opcją wydaje się, jeżeli w konkretnym przypadku może to być poważnie mylące dla użytkownika, aby włączyć autouzupełnianie off z niestandardowym atrybutem autouzupełniania w formularzu. A może można używać IE warunkowe Komentarze do przynajmniej dać użytkownikom IE komunikat ostrzegawczy.
Ile walidacji?

Dokładnie tak, jak szczegółowe sprawdzanie poprawności po stronie klienta powinna być jest dyskusyjna punkt. Nie ma sensu, starając się uczynić go naprawdę rygorystyczne, ponieważ niektóre aspekty mogą zwykle być zatwierdzone jedynie na serwerze, tak. A ponieważ ich celem jest szybka reakcja na użytkownika, to raczej porażki obiekt załadować formularz w dół z wielu kilobajtów Javascript. Z drugiej strony, jeśli ktoś jest na przykład sprawdzanie poprawności adresu e-mail, myślę, że można zrobić, a lepiej niż po prostu sprawdzenie, ‘@’ jest obecny gdzieś w ciągu, jak widziałem parę razy.

Tylko w jednym punkcie mam silne uczucia: wejście nigdy nie powinny być odrzucone z powodu obecności początkowe i końcowe białe przestrzeni. To może być trudne dla użytkownika, aby zobaczyć, że white-space jest obecny i nie odebranie go przed walidacja jest czyste lenistwo ze strony programisty. (Dotyczy to również łamanie wierszy, które mogą być uwzględnione, jeżeli przypadkowo użytkownik kopiuje tekst z innych źródeł; używając ‘\ s’ w wyrażeniu regularnym, będzie wyglądać po tym.)

Istnieje oczywiście wiele więcej do powiedzenia na temat walidacji w ogóle. Świadek projektantów witryn, którzy upierają się, że karty kredytowej data rozpoczęcia to pola obowiązkowe, choć niektóre karty kredytowe (w tym moje) nie ma daty rozpoczęcia. Ale ta strona koncentruje się szczególnie na aspektach po stronie klienta, więc będę resztę zostawić na inny czas.
Konkluzja

Zgodnie z zasadami tutaj spowoduje form, które są zarówno szerzej użyteczne i bardziej przyjazny dla użytkownika niż wiele form w sieci dzisiaj. Spróbujmy uczynić Sieć lepszym miejscem.

Update, Listopad 2004: inny użytkownik poprosił o przykład jak obsługiwać pola wyboru. Wydawało się, że to dobry pomysł, więc dodałem stronę sequel na ten temat.

Aktualizacja, czerwiec 2005: Byłem w końcu znalazłem obejście tego, że Internet Explorer nie (zawsze / kiedykolwiek?) Ustawić ostrość w pełnym zakresie. Okazuje się, że jest to usterka rozrządu w IE. Mam wstawiony 0,1 sekundy opóźnienia w ustawieniu ostrości i teraz działa poprawnie.

Update, Luty 2006: Ja wspomnę tutaj tylko punkt, który mylić kilka korespondentów: komórka tabeli, która otrzymuje komunikat o błędzie musi zawierać jakiś tekst (w przeciwnym razie nie zostanie wykonana prawidłowo w DOM). Jeśli nie chcesz, aby wyświetlić dowolny tekst, wstawić bez spacji ().
Podziękowania:
dzięki różnym abonentom dyskusyjnych comp.infosystems.www.authoring.html i comp.lang.javascript który zaproponował sugestie i poprawy, szczególnie Richard Cornford.

Comments are closed