Asiakaspuolen kentän validointi on jotain, mitä jokaisella lomakkeella pitäisi olla, siitä ei ole epäilystäkään. Ensinnäkin käyttäjän ei tarvitse odottaa ja tuhlata hermojaan. Toiseksi osoitat, että välität vierailijoistasi. Vierailijan on erittäin mukava tietää etukäteen, mitä hän teki väärin.
Tässä opetusohjelmassa opimme kirjoittamaan jQuery-lomakkeen validointia reaaliajassa. Jos haluat nähdä, mitä voit keksiä, voit klikata DEMO ja katsoa.
Mitä opimme tänään?
Kuinka toteutamme jquery-validoinnin? On monia tapoja saavuttaa tämä, tässä ovat yleisimmät:
Voimme luoda SPAN-tunnisteen (joka sisältää vahvistustiedot) syöttökentän viereen ja antaa sille tietyn tunnuksen, jonka kautta pääsemme siihen käsiksi.
Voimme kääriä jokaisen kentän P-tunnisteeseen, jonka sisään luodaan SPAN, joka sisältää tiedot kentän validoinnista.
Voit myös kääriä P-kentän tunnisteella, jonka sisällä voit “opetella” SPAN (lennossa jqueryn avulla).
Tämä kaikki toimii, mutta se ei toimi paras tapa toteutus. Miksi? Koska syöttömuodossa on liikaa ylimääräistä HTML-koodia, jota emme tarvitse. On noudatettava.
Teemme sen kuten tein itselleni. Mielestäni tämä on oikea ratkaisu, vaikka kukaan ei tee niin. Rehellisesti sanottuna en ole nähnyt kenenkään muun tekevän tätä... jos tiedät, kirjoita minulle kommentti oppitunnin lopussa.
Mitä aiomme tehdä? Me kirjoitamme yksinkertainen muoto, kaunis ja puhdas semanttinen koodi, ilman tarpeettomia tunnisteita.
Koska ihmiset täyttävät jokaisen kentän erikseen, voimme seurata ja vahvistaa sen lennossa: - Määritä sen sijainti ikkunassa (vasemmassa yläkulmassa)
- Määritä sen leveys
- Näin tiedämme, missä sen loppu on.
- Lisätään vahvistustiedot tietyn tunnuksen omaavaan DIV-lohkoon tietyn kentän oikealle puolelle. Annamme myös vastaavat luokat .correct tai .incorrect.
Huomautus: tämä on hyväksyttävä myös ihmisille, jotka eivät käytä JavaScriptiä selaimessaan. Nämä tarkistetaan palvelinpuolella.
Hankkeen rakenne Meidän on luotava kolme tiedostoa:
index.html
tyyli.css
validate.js
Katsomme kaiken vaihe vaiheelta... ensin HTML-koodi, sitten tarvittava CSS-tyylejä, keskitymme myöhemmin pääasialliseen jQuery-lomakkeen vahvistusskriptiin.
HTML:n kirjoittaminen Puretaan se kaikki...
Vaihe 1 - luo perus HTML koodi Aloita luomalla index.html-tiedosto ja liittämällä siihen tämä peruskoodi. Voit nähdä, että sisällytämme alla olevan jQuery-tiedoston ennen validation.js-tiedostoa, joka sisältää vahvistuskoodimme.
Vaihe 2 - luo kolmeen osaan jaettu muoto Luomme kolmiosaisen lomakkeen, jossa nähdään, kuinka eri syöttökentät ja ruudut tarkistetaan. Jaossa käytämme FIELDSET- ja LABEL-tunnisteita kunkin osion otsikoissa:
Henkilötiedot (käyttäjänimi, syntymäpäivä, sukupuoli, ajoneuvo).
Sähköposti (käyttäjän sähköpostin syöttökenttä).
Minusta ( lyhyttä tietoa käyttäjästä). Reaaliaikainen lomakkeen vahvistus jQueryn henkilökohtaisten sähköpostitietojen avulla Vaihe 3 - lisää kenttiä ja vahvista -painike Hienoa, luodaan nyt joitain syöttökenttiä lomakkeellemme. Oppitunnillemme valitsimme useita eri kenttiä:
- Kolme INPUT kentät(käyttäjänimi, syntymäaika, sähköpostiosoite).
- RADIO-painikkeet valitaksesi sukupuolen.
- TARKASTUSLAATIKKO varten Ajoneuvo käyttäjä.
- TEXTAREA käyttäjille.
- "Vahvista"-painikkeen PAINIKE.
Käärimme jokaisen LABLE- ja syöttökentän P-tunnisteeseen erottaaksemme sen erillisiksi lohkoiksi. Nyt sinun lopullinen tiedosto index.html näyttää tältä:
Reaaliaikainen lomakkeiden vahvistus jQueryn henkilökohtaisten tietojen avulla
Koko nimi:
Syntymäpäivä (pp-kk-vvvv):
Olen: Mies Nainen
Omistan: auton lentokoneen polkupyörälaivan
Sähköposti Sähköposti ( [sähköposti suojattu]):
Sinusta Kerro meille hieman itsestäsi:
Lähetä
Tämä saattaa näyttää hieman pelottavalta, mutta se johtuu siitä, että lomakkeessamme on paljon syöttökenttiä. Itse asiassa tässä ei ole mitään monimutkaista. Tallenna tiedosto ja katso selaimesta mitä tapahtuu. Nyt koristellaan vähän...
CSS:n lisääminen Koska CSS-tyyli ei ole tämän päivän opetusohjelman pääaihe, emme käsittele sitä. Tarvitsemme vain tämän CSS-koodin, jotta lomake näyttää hyvältä ja kaikki lohkot ovat paikoillaan.
Luo style.css-tiedosto ja liitä siihen alla oleva koodi. Nyt tuleva jquery-vahvistuksen sisältävä lomake näyttää hämmästyttävältä. Eikö ole?
Teksti ( tausta: #efefef; marginaali: 0; täyttö: 0; reuna: ei mitään; tekstin tasaus: keskellä; fontti: normaali 13px Georgia, "Times New Roman", Times, serif; väri: #222; ) #content ( leveys: 500px: marginaali-alhainen: 25px-reunus: 7px; 7px-säde: normaali 30px Verdana, Arial, sans-shadow: 1px 1px: #273953; : 3 kuvapistettä linjaus: 5px; ; -webkit-box-shadow: -1px 1px 2px #a9a9a9; box-shadow: -1px 1px 2px #a9a9a9; ) .error ( tausta: #f60000; reunus: 3px solid #d50000; ) .correct ( tausta: #56d800; reunus: 3px solid #008000; ) .wrong ( font-weight: bold; color: #e90000; ) .normaali ( fontin paino: normaali; väri: #222; ) #lähetä ( tausta: #3f5a81; leveys: 100%; reunus: 5px solid #0F1620; fontti: lihavoitu 30px Verdana, sans-serif; väri: #fafafa; teksti- varjo: 1px 1px #0F1620; -webkit-border-radius: 7px ) #send:hover ( tausta: #4d76b1; reunus: 5px solid #253750; color: #fff; ) #send: (tekstin sisennys: -10px;)
Kirjoitetaan jQuery-lomakkeen vahvistusta Tämä on oppitunnin mielenkiintoisin ja jännittävin osa. Mutta ensin meidän on mietittävä ja kuvattava työmme pääkohdat. Sinun täytyy suunnitella kaikki.
Suunnittelevat Ennen kuin kirjoitamme, kysy itseltäsi kolme kysymystä:
Mitä tarvitsemme tästä käsikirjoituksesta?
Miten haluamme tehdä tämän?
Miten saavutamme tämän?
Tämä on selvää, haluamme komentosarjan vahvistavan lomakkeen. Mutta miten? Haluamme sen tekevän tämän reaaliajassa (kun käyttäjä on täyttänyt syöttökentän) ja kun "Vahvista"-painiketta napsautetaan. Siksi meidän on kirjoitettava useita funktioita: erikseen jokaiselle syöttökentälle ja kaikille lomakkeille (jotka kutsutaan, kun "Vahvista"-painiketta napsautetaan).
Koodin toiston estämiseksi meidän on luotava JavaScript-objekti tätä varten.
Mitä me tarvitsemme tähän? Meidän tapauksessamme JS-objektia kutsutaan nimellä jVal, se sisältää seuraavat menetelmät:
- jVal.fullName
- jVal.birthDate
- jVal.gender
- jVal.vehicle
- jVal.email
- jVal.about
Muuttuja, joka sisältää tilan nykyinen virhe- jVal.errors. Ja menetelmä, joka tarkistaa, onko virheitä, ja vahvistaa lomakkeen lähetyksen tai hylkää sen. Jos virheitä löytyy, se ohjaa käyttäjän lomakkeen alkuun, jossa hän voi täyttää kaikki kentät oikein.
Menetelmä on nimeltään - jVal.sendIt
Nyt voimme alkaa kehittämään jQuery-skripti lomakkeen vahvistus. Kun kirjoitamme ensimmäisen menetelmän, kaikki menee helpommin ja nopeammin.
Aloitetaan työ Koodin perusta on yksinkertainen, ehdottomasti kaikki jquery-koodi sisältyy tähän syntaksiin:
$(asiakirja).ready(funktio())( jVal = ( ); ));
Käyttäjätunnuskentän vahvistaminen Ensimmäinen menetelmämme käsittelee "käyttäjänimi"-kentän. Liitä se jVal-objektin sisään, kuten esimerkissä näkyy:
Muutt jVal = ( "kokoNimi" : function() ( ) );
Nyt kirjoitetaan muutama koodirivi menetelmän sisään. Liitä ne vain, niin katsomme, mitä se tarkoittaa seuraavaksi:
$("body"). append(""); var nameInfo = $("#nameInfo"); var ele = $("#kokonimi"); var pos = ele.offset();
Rivi 1: Lisäämme asiakirjaan DIV-lohkon. Luokkatiedot, antaa tyyliä lohkolle, joka on määritelty style.css-tiedostossa, tekee siitä myös näkymätön käyttämällä display:none; Etsi tunnus, tämä on, jotta sinulla on nopea pääsy tähän lohkoon ja käsittele sitä jQueryn avulla. Tämä DIV-lohko sisältää kentän vahvistustiedot.
Rivi 3: Kirjoitamme kutsun tälle lohkolle muuttujassa, koska käytämme sitä suuri määrä kerran.
Rivi 4: Kuten edellisessä tapauksessa, kirjaamme yhteyden kokonimi-kenttään muuttujaan. Tulemme myös käyttämään sitä monta kertaa.
jQuery offset()-funktio palauttaa elementin nykyisen sijainnin suhteessa asiakirjaan. Palautettiin objektina, joka sisältää ylä- ja vasemmanpuoleiset ominaisuudet. Käytämme tätä toimintoa ele:ssä syöttökentän sijainnin määrittämiseen.
Lisätään nyt muutama rivi lisää...
NameInfo.css(( ylhäällä: pos.top-3, vasen: pos.left+ele.width()+15 ));
Kuten näet, alamme toimia nameInfo-lohkon tyyleillä. Erityisesti asetamme sen sijainnin syöttökentän oikealle puolelle. Tätä varten siirrämme sitä 3 pikseliä ylöspäin (2. koodirivi) ja siirrämme sitä 15 pikseliä kentän oikealle puolelle (3. koodirivi).
Olemme kirjoittaneet 50% ensimmäisestä menetelmästä, viemme sen loppuun. On aika selvittää, kuinka oikein käyttäjä syötti tiedot ja ryhtyä toimiin...
If(ele.val().length< 6) {
jVal.errors = true;
nameInfo.removeClass("correct").addClass("error").html("← at least 6 characters").show();
ele.removeClass("normal").addClass("wrong");
} else {
nameInfo.removeClass("error").addClass("correct").html("√").show();
ele.removeClass("wrong").addClass("normal");
}
Ei näytä hyvältä? Ei ole mitään pelättävää...
Rivi 1: Tarkistamme, että käyttäjän antamassa nimessä on vähintään 6 merkkiä.
Rivi 2: Aseta jVal.errors-muuttuja arvoon true, koska olemme havainneet, että käyttäjätunnus on liian lyhyt. Käytämme tätä jatkossakin.
Rivi 3: Aloitamme käytön nameInfo-elementillämme (jossa näytämme tietoja). Ensin poistamme oikean luokan ja määritämme luokkavirheen. Seuraavaksi lisäämme sisältöä nameInfo-elementtiin, tämä on tieto, että nimen tulee olla pidempi kuin 6 merkkiä. Ja lopuksi teemme viestimme näkyväksi käyttäjälle.
Rivi 4: Alamme manipuloida ele-elementtiämme (käyttäjätunnuksen syöttölomake). Poistamme normaalin luokan ja määritämme sen väärin.
Rivi 5: Jos käyttäjätunnus on tarpeeksi pitkä, niin...
Rivi 6: Aloitamme nameInfo-elementin manipuloinnin. Jos luokkavirhe on määritetty, poistamme sen ja määritämme luokan oikein. Laitamme "lintu" sisään ymmärtääksemme, että kaikki on kunnossa. Ja näyttää viestin käyttäjälle.
Rivi 7: Toimimme ele-elementin kanssa. Poistamme väärän luokan, jos sitä käytetään, ja käytämme normaalia luokkaa.
Olemme luoneet ensimmäisen validointimenetelmämme! On aika testata sitä. Meidän on varmistettava, että menetelmäämme kutsutaan, kun käyttäjä on kirjoittanut nimensä. Tämän toteuttamiseksi meidän on liitettävä tapahtuma toimintoon. Käytämme change()-funktiota. Liitä alla oleva esimerkkikoodi jVal-objektin alle:
$("#kokonimi").change(jVal.fullName);
Mitä tämä tarkoittaa ihmisen kieli: Jos käyttäjä muuttaa "Full name" -kentän arvoa ja tekee sen sitten, kutsutaan fullName-metodia, joka vahvistaa kentän.
Valite.js-tiedostosi pitäisi nyt sisältää seuraavan koodin:
< 6) {
jVal.errors = true;
nameInfo.removeClass("correct").addClass("error").html("← at least 6 characters").show();
ele.removeClass("normal").addClass("wrong");
} else {
nameInfo.removeClass("error").addClass("correct").html("√").show();
ele.removeClass("wrong").addClass("normal");
}
}
};
// bind jVal.fullName function to "Full name" form field
$("#fullname").change(jVal.fullName);
});
Syntymäaikakentän vahvistaminen Nyt kaikki sujuu nopeammin. Meidän täytyy vain tehdä kopio fullName-menetelmästä ja tehdä joitain muutoksia.
Kopioi nyt fullName-menetelmä, liitä se alle ja nimeä se uudelleen syntymäpäiväksi. Ja tee seuraavat muutokset:
- Aina kun nameInfo näkyy, korvaa se syntymätiedolla
- Käytä #kokonimi-arvon sijasta ele-muuttujaa #birthday
- Liitä tämä malli tavallinen ilme alla on birthInfo.css()-lauseke:
var patt = /^(2)\-(2)\-(4)$/i; - Vanhan if()-lausekkeen pitäisi olla:
if(!patt.test(ele.val())) - Tämän kentän viesti on: kirjoita päivämäärä oikeassa muodossa
Syntymäpäivämenetelmän pitäisi näyttää tältä näiden muutosten tekemisen jälkeen:
"syntymäpäivä" : funktio ()( $("body").append(""); var birthInfo = $("#birthInfo"); var ele = $("#syntymäpäivä"); var pos = ele.offset( ); birthInfo.css(( ylhäällä: pos.top-3, vasen: pos.left+ele.width()+15 )); /i; if(!patt.test(ele.val())) ( jVal.errors = true; birthInfo.removeClass("correct").addClass("error").html("← kirjoita päivämäärä oikeassa muodossa ").show(); ele.removeClass("normaali").addClass("väärä"); ) else ( birthInfo.removeClass("error").addClass("oikea").html("√").show (); ele.removeClass("väärä").addClass("normaali" ) )
Tarkistamme säännöllisen lausekkeen (rivi 14) avulla, että päivämäärä on muodossa 28.3.1987. Rivillä 16 tarkistamme, että käyttäjän syntymäaika vastaa säännöllisen lausekkeen mallia.
Ja tietysti syntymäaikakenttään täytyy liittää change()-tapahtuma:
$("#syntymäpäivä").change(jVal.syntymäpäivä);
Nyt meillä on toinen toimiva jQuery-lomakkeen validointimenetelmä. Hyvää työtä!
Kentän validoinnista tulee Kopioi jälleen fullName-menetelmä, nimeä se uudelleen sukupuoleksi ja tee seuraavat muutokset:
- Nimeä kaikki nameInfo uudelleen sukupuolitiedoksi
- Käytä #kokonimi-arvon sijasta ele-muuttujaa #nainen
- Muuta genderInfo.css()-lausekkeen ylin muuttuja top: pos.top-10 ja vasemmalta vasemmalle: pos.left+ele.width()+60
- If()-lauseemme pitäisi olla:
if($("syöttö:tarkistettu").pituus === 0) - Viesti käyttäjälle on: oletko mies vai nainen?
Tältä sukupuolimenetelmän pitäisi näyttää muutosten jälkeen:
"sukupuoli" : funktio ()( $("body").append(""); var genderInfo = $("#genderInfo"); var ele = $("#nainen"); var pos = ele.offset( ); genderInfo.css(( ylhäällä: pos.top-10, vasen: pos.left+ele.width()+60 )); if($("input:checked"). pituus === 0) ( jVal .errors = true; genderInfo.removeClass("oikea").addClass("error").html("← oletko mies vai nainen?").show("ele.removeClass").addClass ("väärä"); else ( genderInfo..removeClass("error").addClass("correct").html("√").show(); ele.removeClass("wrong").addClass("normaali" ) ) )
Rivillä 14 tarkistamme, kuinka monta radiovalitsinta on valittu. Jos 0, käyttäjä ei valinnut mitään, näytämme virheilmoituksen.
Ja kuten aina, liitämme mukaan sukupuolimenetelmän radiopainikkeet:
$("syöttö").muutos(jVal.sukupuoli);
Validointitarkistukset - ajoneuvon omistus Kopioidaan nyt sukupuolimenetelmä ja nimetään se uudelleen ajoneuvoksi tekemällä seuraavat muutokset:
- Korvaa kaikki genderInfo ajoneuvotiedolla
- Kirjoita #nainen sijaan #ship for ele.
- vehicleInfo.css()-lausekkeessa vasemman arvo tulee jättää: pos.left+ele.width()+40
- If()-lauseemme pitäisi nyt olla:
if($("syöttö:tarkistettu").pituus
