”But does jQuery make it easy to write your own validation plugin?”
toki, mutta on vielä paljon hienouksia hoidettavana: tarvitset standardikirjaston validointimenetelmiä (kuten sähköpostit, URL-osoitteet, luottokorttinumerot). Sinun täytyy sijoittaa virheilmoituksia DOM ja näyttää ja piilottaa ne tarvittaessa. Haluat reagoida enemmän kuin vain lähetä tapahtuma, kuten keyup ja blur.
saatat tarvita erilaisia tapoja määrittää validointisäännöt sen palvelinpuolen ympäristön mukaan, jota käytät eri projekteissa. Ethän halua keksiä pyörää uudelleen?

”But aren’ t there already a ton of validation plugins out there?”
Right, on olemassa paljon ei-jQuery-pohjaisia ratkaisuja (joita välttäisit, koska löysit jQueryn) ja joitakin jQuery-pohjaisia ratkaisuja. Tämä erityisesti yksi on yksi vanhimmista jQuery plugins (alkoi heinäkuussa 2006) ja on osoittautunut projekteissa ympäri maailmaa. On myös artikkeli siitä, miten tämä plugin sopii laskun pitäisi olla validointi ratkaisu.

ei vakuuttunut? Tutustu tähän esimerkkiin:

<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 isn ’ t that nice and easy?

yksi rivi jQueryä lomakkeen valitsemiseksi ja validointiliitännäisen soveltamiseksi sekä muutama huomautus kuhunkin elementtiin validointisääntöjen määrittämiseksi.

se ei tietenkään ole ainoa tapa täsmentää sääntöjä. Sinun ei myöskään tarvitse luottaa näihin oletusviesteihin,mutta ne ovat käteviä, kun aloitat lomakkeen vahvistamisen.

linkitä muutamia asioita, joita kannattaa varoa demolla leikittäessä

• yritettyään lähettää virheellisen lomakkeen, ensimmäinen virheellinen Elementti tarkennetaan, jolloin käyttäjä voi korjata kentän. Jos toinen virheellinen kenttä – joka ei ollut ensimmäinen – oli Tarkennettu ennen lähettämistä, kyseinen kenttä on kohdistettu sen sijaan, jolloin käyttäjä voi aloittaa alhaalta, jos hän haluaa.
• ennen kuin kenttä on merkitty virheelliseksi, validointi on laiskanpulskeaa: ennen lomakkeen lähettämistä käyttäjä voi välilehdellä kenttien läpi saamatta ärsyttäviä viestejä – heitä ei salakuunnella ennen kuin heillä on mahdollisuus syöttää oikea arvo
• kun kenttä on merkitty kelvottomaksi, se validoidaan innokkaasti: Heti kun käyttäjä on antanut tarvittavan arvon, virheviesti poistetaan
• Jos käyttäjä syöttää jotain merkitsemättömään kenttään, ja välilehdet/napsautukset pois siitä (sumenna kenttä), se vahvistetaan-ilmeisesti käyttäjällä oli aikomus syöttää jotain, mutta ei syöttänyt oikeaa arvoa

että käyttäytyminen voi olla ärsyttävää, kun napsautat validointilaajennuksen demoja – se on suunniteltu huomaamattomaan käyttökokemukseen, ärsyttäen käyttäjää mahdollisimman vähän tarpeettomilla virheilmoituksilla. Joten kun kokeilet muita demoja, yritä reagoida kuten joku käyttäjistäsi olisi, Ja katso, onko käyttäytyminen parempi silloin. Jos ei, kerro minulle kaikista ideoista sinulla voi olla parannuksia!

link API-dokumentaatio

todennäköisesti etsit

linkkivaihtoehtoja validoi () – menetelmälle

Jos ei, jatka lukemista.

dokumentaatiossa käytetään hyvin usein kahta termiä, joten on tärkeää, että tiedät niiden merkityksen validointiliitännäisen yhteydessä:

• menetelmä: Validointimenetelmä toteuttaa elementin validointilogiikan, kuten sähköpostimenetelmä, joka tarkistaa tekstisyötteen arvon oikean muodon. Saatavilla on joukko vakiomenetelmiä, ja omia kirjoituksia on helppo tehdä.
• sääntö: validointisääntö liittää elementin validointimenetelmään, kuten ”validoi syöte nimellä ”primary-mail” menetelmiin ”required” ja ”email”.

link Plugin methods

Tämä kirjasto lisää kolme jQuery plugin methods, tärkein syöttökohta on validate method:

• validate() – validoi valitun muodon.
• valid() – tarkistaa, ovatko valittu lomake tai valitut elementit kelvollisia.
• rules() – Lue, lisää ja poista elementin säännöt.

link Custom selectors

Tämä kirjasto laajentaa myös jQueryn kolmella custom selectors:

• :blank – valitsee kaikki elementit, joilla on tyhjä arvo.
• :filled – valitsee kaikki alkuaineet, joilla on täytetty arvo.
• :unchecked – valitsee kaikki tekijät, joita ei ole valittu.

link Validator

validointimenetelmä palauttaa Validaattoriobjektin, jolla on muutamia julkisia menetelmiä, joilla voit käynnistää validoinnin ohjelmallisesti tai muuttaa lomakkeen sisältöä. Validaattori objekti on enemmän menetelmiä, mutta vain ne dokumentoitu tässä on tarkoitettu käytettäväksi.

• Validator.form() – validoi lomakkeen.
• Validator.element() – validoi yhden alkuaineen.
• Validator.resetForm() – Nollaa hallitun muodon.
• Validator.showErrors() – Näytä määritellyt viestit.
• Validator.numberOfInvalids() – palauttaa virheellisten kenttien määrän.
• Validator.destroy() – tuhoaa tämän validaattorin esiintymän.

validaattorikohteessa on muutamia staattisia menetelmiä:

• jQuery.validator.addMethod() – Lisää mukautettu validointimenetelmä.
• jQuery.validator.format() – korvaa {n} paikkamerkit argumenteilla.
• jQuery.validator.setDefaults() – muokkaa oletusasetuksia validointia varten.
• jQuery.validator.addClassRules() – Add a compound class method.

Link List of built-in Validation methods

a set of standard validation methods is provided:

• required – Makes the element required.
• remote – pyytää resurssia tarkistamaan elementin kelpoisuuden.
• minlength – saa elementin vaatimaan tietyn vähimmäispituuden.
• maxlength – saa elementin vaatimaan tietyn enimmäispituuden.
• rangelength – saa elementin vaatimaan tietyn arvoalueen.
• min – tekee alkuaineesta tietyn minimin.
• max – saa elementin vaatimaan tietyn maksimin.
• range – saa elementin vaatimaan tietyn arvoalueen.
• step – saa elementin vaatimaan tietyn askeleen.
• email – saa elementin vaatimaan kelvollisen sähköpostin
• url – saa elementin vaatimaan kelvollisen url – osoitteen
• date – saa elementin vaatimaan päivämäärän.
• dateISO – saa elementin vaatimaan ISO-päivämäärän.
• number – saa elementin vaatimaan desimaalilukua.
• digits – saa elementin vaatimaan vain numeroita.
• equalTo – edellyttää, että alkuaine on sama kuin toinen

joitakin muita menetelmiä annetaan lisäosina, ja ne sisältyvät nykyisin lisämenetelmiin.js latauspaketissa. Kaikkia niistä ei ole dokumentoitu täällä:

• accept – tekee tiedoston lataamisesta hyväksyttävän vain määritellyt mime-tyypit.
• creditcard – saa elementin vaatimaan luottokortin numeron.
• extension – tekee elementistä vaativan tietyn tiedostopääteen.
• phoneUS – validoi voimassa oleva Yhdysvaltain puhelinnumero.
• require_from_group – varmistaa, että tietty määrä ryhmän kenttiä on täytetty.

kaikkien lisämenetelmien lähdekoodi löytyy GitHub-arkistosta.

sisäänrakennettujen sääntöjen toteuttaminen on mahdollista määritellä uudelleen käyttämällä $.validator.methods ominaisuus

linkki Yleisohjeet

Yleisohjeet-osiossa käsitellään yksityiskohtaisesti liitännäisen rakennetta ja ideoita ja selitetään, miksi tietyt asiat ovat niin kuin ovat. Se kattaa ominaisuudet yksityiskohtaisemmin kuin API-dokumentaatio, joka vain lyhyesti selittää eri menetelmiä ja vaihtoehtoja.

Jos olet päättänyt käyttää validointiliitännäistä hakemuksessasi ja haluat tutustua siihen paremmin, on suositeltavaa lukea ohjeet.

linkkikentät, joissa on kompleksinimiä (suluissa, pisteissä)

kun sinulla on nimi-attribuutti kuten käyttäjällä, muista laittaa nimi lainausmerkkeihin. Lisätietoja yleisissä ohjeissa.

linkki liian paljon rekursiota

toinen yleinen ongelma esiintyy tämän koodin kanssa:

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

tästä seuraa liian suuri rekursiovirhe: $(form).submit() käynnistää toisen validointikierroksen, mikä johtaa toiseen pyyntöön submithandlerille ja voila, rekursio. Korvaa se muodolla.submit (), joka käynnistää alkuperäisen submit-tapahtuman eikä validointia.

siis oikea koodi näyttää hieman erilaiselta:

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

link the Marketo sign-up form

link the Marketo sign-up form, Step 2

perustuu vanhaan versioon marketo.com ilmoittautumislomake. Mukautettu validointi korvattiin kerran tällä liitännäisellä. Kiitokset Glen Lipkalle osallistumisesta!

Demon merkittäviä piirteitä:

• räätälöity viestinäyttö: vaaditulle menetelmälle ei näytetä viestejä, vain kirjoitusvirheille (kuten väärälle sähköpostimuodolle); yläosassa näytetään yhteenveto (”unohdit 12 kenttää. Niitä on korostettu alla.”)
• sähköpostikentän etävalidointi. Yritä syöttää esim.
• integrointi naamioituun tuloliitännäiseen, Katso Zip-ja Puhelinkentät sekä luottokortin numero vaiheessa 2
• mukautettu menetelmä laskutusosoitteen tekemiseksi portaassa 2 valinnaiseksi, kun” sama kuin yrityksen osoite ” on tarkistettu
• mukautettu menetelmä salasanan tarkistamiseksi: Tarkistaa, että salasana sisältää vähintään yhden numeron ja yhden merkin ja että se on vähintään 6 merkkiä pitkä. Jos käyttäjä sumentaa kentän virheellisellä arvolla, syöte tyhjenee ja saa taas tarkennuksen.

linkitä Muista maito-ilmoittautumislomake

ilmoittautumislomake osoitteesta rememberthemilk.com (perustuu vanhempaan versioon). Mukautettu validointi korvattiin tällä liitännäisellä. Kiitos RTM osallistumisesta!

Demon merkittäviä piirteitä:

• Custom message display, joka perustuu alkuperäiseen taulukkoasetteluun, käyttäen onnistumisvaihtoehtoa näyttääkseen valintamerkin kelvollisille kentille
• käyttäjätunnuksen etähyväksyntä, tarkistaakseen onko se jo otettu (kokeile ”Peter”, ”asdf” tai ”George”)

link a multipart ”buy&sell a house” form

Contributed by Michael Evangelista näytetään monipart lomake ostaa ja myydä taloja.

Demon merkittäviä piirteitä:

• Multipart, toteutettu jQuery UI-harmonikalla ja mukautettu menetelmä, jolla tarkistetaan , onko Elementti nykyisellä sivulla, kun validoitu
• integrointi naamioituun tuloliitännäiseen, Katso Puhelin-ja Zip-kentät

linkki käyttäen etävalidointia auttaakseen S: n kanssa

ominaisuudet etävalidointi, joka auttaa Käyttäjää täyttämään S: n.

Demon huomattavat ominaisuudet:

• etävalidointi käyttäjän tarkistamiseksi merkitty oikein, pakottamatta häntä toimittamaan lomakkeen ensin