„ale czy jQuery nie ułatwia pisania własnej wtyczki do walidacji?”
oczywiście, ale wciąż jest wiele subtelności, którymi należy się zająć: potrzebujesz standardowej biblioteki metod walidacji (takich jak e-maile, adresy URL, numery kart kredytowych). Musisz umieścić komunikaty o błędach w drzewie DOM i pokazać je i ukryć w razie potrzeby. Chcesz reagować na więcej niż tylko zgłoszenie, takie jak keyup i blur.
możesz potrzebować różnych sposobów określenia zasad walidacji w zależności od środowiska po stronie serwera, którego używasz w różnych projektach. W końcu nie chcesz odkrywać koła na nowo, prawda?

„ale czy nie ma już mnóstwo wtyczek do walidacji?”
racja, istnieje wiele rozwiązań nie opartych na jQuery (których można uniknąć, ponieważ znalazłeś jQuery) i niektóre rozwiązania oparte na jQuery. Ta konkretna jest jedną z najstarszych wtyczek jQuery (rozpoczęta w lipcu 2006) i sprawdziła się w projektach na całym świecie. Istnieje również artykuł omawiający, jak ta wtyczka pasuje do rachunku powinno być rozwiązanie walidacji.

nie jesteś przekonany? Spójrz na ten przykład:

<form class="cmxform" method="get" action="">
 <fieldset>
 <legend>Please provide your name, email address (won't be published) and a comment</legend>
 <p>
 <label for="cname">Name (required, at least 2 characters)</label>
 <input name="name" minlength="2" type="text" required>
 </p>
 <p>
 <label for="cemail">E-Mail (required)</label>
 <input type="email" name="email" required>
 </p>
 <p>
 <label for="curl">URL (optional)</label>
 <input type="url" name="url">
 </p>
 <p>
 <label for="ccomment">Your comment (required)</label>
 <textarea name="comment" required></textarea>
 </p>
 <p>
 <input class="submit" type="submit" value="Submit">
 </p>
 </fieldset>
</form>
<script>
$("#commentForm").validate();
</script>

link czy to nie jest przyjemne i proste?

pojedyncza linia jQuery, aby wybrać formularz i zastosować wtyczkę walidacji, plus kilka adnotacji na każdym elemencie, aby określić reguły walidacji.

oczywiście nie jest to jedyny sposób na określenie reguł. Nie musisz również polegać na tych domyślnych wiadomościach, ale przydają się one podczas rozpoczynania sprawdzania poprawności formularza.

link kilka rzeczy, na które należy zwrócić uwagę podczas zabawy z demo

• po próbie przesłania nieprawidłowego formularza, pierwszy nieprawidłowy element jest skupiony, umożliwiając użytkownikowi poprawienie pola. Jeśli inne nieprawidłowe pole – które nie było pierwsze-było skupione przed przesłaniem, to pole jest skupione, co pozwala użytkownikowi zacząć od dołu, jeśli woli.
• zanim pole zostanie oznaczone jako nieważne, Walidacja jest leniwa: przed wysłaniem formularza po raz pierwszy użytkownik może przeglądać pola bez otrzymywania irytujących wiadomości – nie będą one podsłuchiwane, zanim nie będą miały szansy na wprowadzenie poprawnej wartości
• gdy pole jest oznaczone jako nieważne, jest chętnie sprawdzane: Gdy tylko użytkownik wprowadzi wymaganą wartość, komunikat o błędzie jest usuwany
• Jeśli użytkownik wprowadzi coś w nieoznaczonym polu, a karty/kliknie od niego (rozmyje pole), jest sprawdzany-oczywiście użytkownik miał zamiar wprowadzić coś, ale nie wprowadził prawidłowej wartości

to zachowanie może być irytujące podczas klikania demonstracji wtyczki walidacji – jest zaprojektowane dla dyskretnego doświadczenia użytkownika, irytujące użytkownika w jak najmniejszym stopniu niepotrzebnymi komunikatami o błędach. Więc kiedy wypróbujesz inne dema, spróbuj zareagować tak, jak jeden z Twoich użytkowników, i sprawdź, czy zachowanie jest lepsze. Jeśli nie, daj mi znać o wszelkich pomysłach na ulepszenia!

link Dokumentacja API

prawdopodobnie szukasz

opcji linku dla metody validate ()

Jeśli nie, czytaj dalej.

w całej dokumentacji bardzo często używane są dwa terminy, dlatego ważne jest, abyś znał ich znaczenie w kontekście wtyczki walidacji:

• metoda: Metoda sprawdzania poprawności implementuje logikę sprawdzania poprawności elementu, jak metoda e-mail, która sprawdza właściwy format wartości wejściowej tekstu. Dostępny jest zestaw standardowych metod i łatwo jest napisać własne.
• reguła: Reguła walidacji kojarzy element z metodą walidacji, taką jak „validate input with name” primary-mail „z metodami” required „i”email”.

metody wtyczki linków

Ta biblioteka dodaje trzy metody wtyczki jQuery, głównym punktem wejścia jestvalidate metoda:

• validate() – sprawdza wybraną formę.
• valid() – sprawdza, czy wybrany formularz lub wybrane elementy są poprawne.
• rules() – odczytywanie, dodawanie i usuwanie reguł dla elementu.

link niestandardowe selektory

Ta biblioteka rozszerza jQuery o trzy niestandardowe selektory:

• :blank – wybiera wszystkie elementy z pustą wartością.
• :filled – wybiera wszystkie elementy z wypełnioną wartością.
• :unchecked – wybiera wszystkie elementy, które nie są zaznaczone.

walidator linków

metoda validate zwraca obiekt walidatora, który ma kilka publicznych metod, których można użyć do programowego uruchamiania walidacji lub zmiany zawartości formularza. Obiekt walidator posiada więcej metod, ale tylko te opisane tutaj są przeznaczone do użycia.

• Validator.form() – sprawdza formularz.
• Validator.element() – weryfikuje pojedynczy element.
• Validator.resetForm() – resetuje kontrolowany formularz.
• Validator.showErrors() – pokazuje podane wiadomości.
• Validator.numberOfInvalids() – Zwraca liczbę nieprawidłowych pól.
• Validator.destroy() – niszczy tę instancję walidatora.

w obiekcie walidatora jest kilka statycznych metod:

• jQuery.validator.addMethod() – Dodaj niestandardową metodę walidacji.
• jQuery.validator.format() – zastępuje {N} symbole zastępcze argumentami.
• jQuery.validator.setDefaults() – Modyfikuj domyślne ustawienia dla walidacji.
• jQuery.validator.addClassRules() – dodaje metodę klasy złożonej.

link lista wbudowanych metod walidacji

dostępny jest zestaw standardowych metod walidacji:

• required-sprawia, że element jest wymagany.
• remote – żąda zasobu, aby sprawdzić poprawność elementu.
• minlength – powoduje, że element wymaga określonej minimalnej długości.
• maxlength – powoduje, że element wymaga określonej maksymalnej długości.
• rangelength – powoduje, że element wymaga określonego zakresu wartości.
• min – powoduje, że element wymaga określonego minimum.
• max – sprawia, że element wymaga określonego maksimum.
• range – powoduje, że element wymaga określonego zakresu wartości.
• step – sprawia, że element wymaga danego kroku.
• email – sprawia, że element wymaga poprawnego adresu e – mail
• url – sprawia, że element wymaga poprawnego adresu url
• date – sprawia, że element wymaga daty.
• dateISO – sprawia, że element wymaga daty ISO.
• number – powoduje, że element wymaga liczby dziesiętnej.
• digits – sprawia, że element wymaga tylko cyfr.
• equalTo – wymaga, aby element był taki sam jak inny

niektóre metody są dostarczane jako dodatki i są obecnie zawarte w additional-methods.js w pakiecie do pobrania. Nie wszystkie z nich są tu udokumentowane:

• accept – sprawia, że przesyłany plik akceptuje tylko określone typy mime.
• creditcard – sprawia, że element wymaga numeru karty kredytowej.
• extension – sprawia, że element wymaga określonego rozszerzenia pliku.
• phoneUS – Sprawdź poprawny numer telefonu w USA.
• require_from_group – zapewnia, że podana liczba pól w grupie jest kompletna.

Możesz znaleźć kod źródłowy wszystkich dodatkowych metod w repozytorium GitHub.

możliwe jest ponowne zdefiniowanie implementacji wbudowanych reguł za pomocą$.validator.methods właściwości

link ogólne wytyczne

sekcja ogólne wytyczne zawiera szczegółowe omówienie projektu i pomysłów stojących za wtyczką, wyjaśniając, dlaczego pewne rzeczy są takie, jakie są. Obejmuje on funkcje bardziej szczegółowo niż Dokumentacja API, która krótko wyjaśnia różne dostępne metody i opcje.

Jeśli zdecydowałeś się na użycie wtyczki validation w swojej aplikacji i chcesz ją lepiej poznać, zaleca się zapoznanie się z wytycznymi.

łącz pola ze złożonymi nazwami (nawiasy, kropki)

gdy masz atrybut name, taki jak user, upewnij się, że umieściłeś nazwę w cudzysłowie. Więcej szczegółów w ogólnych wytycznych.

link za dużo rekurencji

kolejny częsty problem występuje z tym kodem:

powoduje to zbyt duży błąd rekurencji:$(form).submit()uruchamia kolejną rundę walidacji, skutkując kolejnym wywołaniem submithandler i voila, rekurencji. Zastąp to formą.submit(), która uruchamia natywne Zdarzenie submit zamiast walidacji.

poprawny kod wygląda więc nieco inaczej: