” de nem jQuery megkönnyíti, hogy írjon a saját érvényesítési plugin?”
persze, de még mindig sok finomság van a gondozáshoz: szüksége van egy szabványos hitelesítési módszerkönyvtárra (például e-mailek, URL-ek, hitelkártya-számok). Hibaüzeneteket kell elhelyezned a DOM-ban, meg kell mutatnod, majd el kell rejtened őket, ha szükséges. Nem csak egy beküldési eseményre szeretne reagálni, mint például a KeyUp vagy a blur.
lehet, hogy különböző módokon kell megadnia az érvényesítési Szabályokat a különböző projekteken használt szerver oldali környezetnek megfelelően. És végül is nem akarod újra feltalálni a kereket, ugye?

” de nincs már egy csomó érvényesítési plugin odakint?”
igaz, van egy csomó nem jQuery-alapú megoldások (amit elkerülni, mivel megtalálta jQuery) és néhány jQuery-alapú megoldások. Ez az egyik legrégebbi jQuery plugin (2006 júliusában kezdődött), amely a világ minden tájáról származó projektekben bizonyult. Van egy cikk is, amely arról szól, hogy ez a plugin hogyan illeszkedik a leendő érvényesítési megoldás számlájához.

nem győzte meg? Vessen egy pillantást erre a példára:

<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 nem az, hogy szép lassan?

egy sor jQuery, hogy válassza ki az űrlapot, majd alkalmazza az érvényesítési plugin, plusz néhány megjegyzést minden elem, hogy adja meg az érvényesítési szabályokat.

természetesen nem ez az egyetlen módja a szabályok meghatározásának. Nem kell támaszkodnia ezekre az alapértelmezett üzenetekre is, de hasznosak lehetnek az űrlap érvényesítésének megkezdésekor.

link néhány dolog, hogy néz ki, ha játszik körül a demo

• miután megpróbálta benyújtani érvénytelen formában, az első érvénytelen elem középpontjában, amely lehetővé teszi a felhasználó számára, hogy javítsa ki a mezőt. Ha egy másik érvénytelen mező – nem ez volt az első-a beküldés előtt összpontosult, akkor ez a mező inkább fókuszált, lehetővé téve a felhasználó számára, hogy az alján kezdje el, ha inkább.
• Előtt van jelölve, mint érvénytelen, az érvényesítés lusta: a nyomtatvány benyújtása Előtt, az első alkalommal, a felhasználó fülre mezőkön keresztül, anélkül, hogy idegesítő üzenetek – nem jutnak poloska előtt, miután az esély, hogy írja be a helyes értéket
• Ha a mező megjelölt érvénytelen, türelmetlenül validált: Amint a felhasználó lépett be a szükséges értéket, a hibaüzenet törlődik
• Ha a felhasználó belép valami nem jelölt mezőt, majd tabs/kattintással távol (maszat a pályán), az ellenőrzés – nyilvánvaló, hogy a felhasználó az volt a szándéka, hogy adja meg valamit, de nem adja meg a helyes értéket

Ez a magatartás lehet bosszantó, amikor kattintva demos az ellenőrző plugin – úgy tervezték, egy diszkrét felhasználói élmény, bosszantó, hogy a felhasználó a lehető legkevesebb felesleges hibaüzenetek. Tehát amikor más demókat próbál ki, próbáljon úgy reagálni, mint az egyik felhasználó, majd nézze meg, hogy jobb-e a viselkedés. Ha nem, kérjük, tudassa velem bármilyen ötletet lehet, hogy a fejlesztések!

link API dokumentáció

valószínűleg a

hivatkozási lehetőségeket keresi a validate() metódus

ha nem, olvassa tovább.

a dokumentáció során nagyon gyakran két kifejezést használnak, ezért fontos, hogy tudja a jelentését az érvényesítési plugin összefüggésében:

• módszer: Az érvényesítési módszer végrehajtja a logikát egy elem érvényesítéséhez, például egy e-mail módszerhez, amely ellenőrzi a szövegbevitel értékének megfelelő formátumát. Egy sor szabványos módszerek állnak rendelkezésre, könnyű írni a saját.
• szabály: egy validációs szabály egy elemet egy validációs módszerrel társít, mint például a “validate input with name” primary-mail “a” required “és az”e-mail” módszerekkel.

link Plugin módszerek

Ez a könyvtár hozzáteszi három jQuery plugin módszerek, a fő belépési pont, hogy a validate módszer:

• validate() – validálja a kiválasztott űrlapot.
• valid() – ellenőrzi, hogy a kiválasztott űrlap vagy a kiválasztott elemek érvényesek-e.
• rules() – egy elemre vonatkozó szabályok olvasása, hozzáadása és eltávolítása.

link egyéni kiválasztók

Ez a könyvtár is kiterjeszti jQuery három egyéni kiválasztók:

• :blank – kiválasztja az összes elem egy üres értéket.
• :filled – az összes elemet kitöltött értékkel választja ki.
• :unchecked – kiválasztja az összes elem, amely nincs bejelölve.

link Validator

az érvényesítési módszer egy Validator objektumot ad vissza, amely néhány nyilvános módszerrel rendelkezik, amelyeket programozottan érvényesíthet, vagy megváltoztathatja az űrlap tartalmát. A validator objektum több módszerrel rendelkezik, de csak az itt dokumentált módszerek használhatók.

• Validator.form() – érvényesíti az űrlapot.
• Validator.element() – érvényesít egy elemet.
• Validator.resetForm() – visszaállítja a szabályozott űrlapot.
• Validator.showErrors() – A megadott üzenetek megjelenítése.
• Validator.numberOfInvalids() – visszaadja az érvénytelen mezők számát.
• Validator.destroy() – megsemmisíti a validator ezen példányát.

van néhány statikus módszer a validator objektumon:

• jQuery.validator.addMethod() – adjon hozzá egyéni érvényesítési módszert.
• jQuery.validator.format() – argumentumokkal helyettesíti a {n} helyőrzőket.
• jQuery.validator.setDefaults() – az érvényesítés alapértelmezett beállításainak módosítása.
• jQuery.validator.addClassRules() – összetett osztálymódszer hozzáadása.

A beépített validációs módszerek linklistája

szabványos validációs módszerek állnak rendelkezésre:

• required – az elem szükséges.
• remote – erőforrást kér az elem érvényességének ellenőrzéséhez.
• minlength – teszi az elem igényel egy adott minimális hossza.
• maxlength – teszi az elem igényel egy adott maximális hossza.
• – teszi az elem igényel egy adott értéktartományban.
• min – teszi az elem igényel egy adott minimum.
• max – teszi az elem igényel egy adott maximális.
• range – az elem egy adott értéktartományt igényel.
• step – teszi az elem igényel egy adott lépést.
• email – teszi az elem igényel érvényes e – mail
• url – teszi az elem igényel érvényes url
• date – teszi az elem igényel dátumot.
• dateISO – az elem ISO-dátumot igényel.
• number – teszi az elem igényel decimális számot.
• digits – az elem csak számjegyeket igényel.
• equalTo – megköveteli, hogy az elem ugyanaz legyen, mint egy másik

néhány további módszer kiegészítőként is rendelkezésre áll, és jelenleg további módszerek szerepelnek.js a letöltési csomagban. Nem mindegyik dokumentálva van itt:

• accept – fájlfeltöltést csak meghatározott mime-típusok fogadnak el.
• creditcard – az elemhez hitelkártya-szám szükséges.
• extension – az elemhez egy bizonyos fájlkiterjesztés szükséges.
• phoneUS – érvényes amerikai telefonszám érvényesítése.
• require_from_group – biztosítja egy adott számú mező egy csoportban teljesek.

a GitHub adattárban megtalálható minden további módszer forráskódja.

a beépített szabályok végrehajtását a $.validator.methods property

link általános irányelvek

az Általános irányelvek szakasz részletesen ismerteti a plugin mögötti tervezést és ötleteket, elmagyarázva, hogy miért vannak bizonyos dolgok, ahogy vannak. Ez kiterjed a funkciók részletesebben, mint az API dokumentáció, amely csak röviden ismerteti a különböző módszerek, lehetőségek állnak rendelkezésre.

Ha úgy döntött, hogy az érvényesítési bővítményt használja az alkalmazásban, és szeretné jobban megismerni, javasoljuk, hogy olvassa el az irányelveket.

link mezők komplex nevekkel (zárójelek, pontok)

ha olyan név attribútummal rendelkezik, mint a felhasználó, győződjön meg róla, hogy a nevet idézőjelekbe helyezi. További részletek az Általános iránymutatásokban.

link túl sok rekurzió

egy másik gyakori probléma merül fel ezzel a kóddal:

 $("#myform").validate({
 submitHandler: function(form) {
 // some other code
 // maybe disabling submit button
 // then:
 $(form).submit();
 }
 });

az eredmény a túl-sok-a rekurzió hiba: $(form).submit() kiváltó újabb érvényesítés, ami egy másik hívást submitHandler, voilá, rekurzió. Cserélje ki ezt formára.Küldés (), amely a natív küldési eseményt váltja ki, nem pedig az érvényesítést.

Tehát a megfelelő kódot úgy néz ki, kicsit más:

 $("#myform").validate({
 submitHandler: function(form) {
 form.submit();
 }
 });

link A Marketo regisztrációs űrlapot

link A Marketo regisztrációs űrlapot, 2. lépés

Alapján egy régi változata marketo.com regisztrációs űrlapot. Az egyéni érvényesítést egyszer felváltotta ez a plugin. Köszönet Glen Lipkának, hogy hozzájárult!

A demó figyelemre méltó jellemzői:

• Customized message display: nincs üzenet jelenik meg a kívánt módszert, csak a gépelés-hibák(mint a rossz e-mail formátum); összefoglaló jelenik meg a tetején (“kimaradt 12 mezőt. Az alábbiakban kiemeltük őket.”)
• az e-mail mező távoli érvényesítése. Próbálj meg belépni pl.
• Integration with masked-input plugin, see Zip and Phone fields and Credit Card Number on step 2
• a custom method for making the billing address on step 2 optional when “Same as Company Address” is checked
• a custom method for checking the password: Ellenőrzi, hogy a jelszó legalább egy számot és egy karaktert tartalmaz-e, és hogy legalább 6 karakter hosszú-e. Ha a felhasználó egy érvénytelen értékkel elhomályosítja a mezőt, a bemenet kiürül, majd ismét fókuszba kerül.

link the Remember the Milk sign-up form

the sign-up form from rememberthemilk.com (egy régebbi verzió alapján). Az egyéni érvényesítést ezzel a bővítménnyel cserélték ki. Köszönet RTM hozzájáruló!

A demó figyelemre méltó jellemzői:

• Egyéni kijelzőn megjelenő üzenet alapján, az eredeti táblázat elrendezés segítségével siker lehetőség, hogy megjelenjen egy pipa érvényes mezők
• Távoli érvényesítése felhasználónév, hogy ellenőrizze, hogy ez már foglalt volt (próbáld ki a “Peter”, “asdf” vagy a “George”)

link Egy többrészes “buy&házat eladni” nyomtatvány

írta: Michael Evangelista, mutatja egy többrészes űrlap vételi-eladási házak.

A demó figyelemre méltó jellemzői:

• Többrészes, megvalósítva, hogy a a jQuery UI harmonika, valamint egyéni módszer, hogy ellenőrizze, ha egy elem a jelenlegi oldal, ha az érvényesített
• Integráció a maszkos-input plugin, lásd: a Telefon, illetve Zip mezők

link Segítségével távoli érvényesítés, hogy segítsen s

Funkciók távoli érvényesítése segíti a felhasználót, hogy töltse ki s.

figyelemre Méltó jellemzője a demo:

• Távoli érvényesítés, hogy ellenőrizze, ha a felhasználó belépett a megfelelő , anélkül, hogy arra kényszerítve őt, hogy küldje el az űrlapot első