Kliendipoolne väljavalideerimine peaks olema igal vormil, selles pole kahtlust. Esiteks ei pea kasutaja ootama ja närve raiskama. Teiseks näitate, et hoolite oma külastajatest. Külastajal on väga tore ette teada, mida ta valesti tegi.
Selles õpetuses õpime, kuidas jQuery vormi kinnitamist reaalajas kirjutada. Kui soovite näha, mida saate välja mõelda, klõpsake DEMO ja vaadake.
Mida me täna õpime?
Kuidas me jquery valideerimist rakendame? Selle saavutamiseks on palju viise, siin on kõige levinumad:
Saame luua sisestusvälja kõrvale SPAN-märgendi (mis sisaldab kinnitusteavet) ja anda sellele konkreetse ID, mille kaudu me sellele juurde pääseme.
Saame mähkida iga välja P-märgendisse, mille sees loome SPAN-i, mis sisaldab teavet välja valideerimise kohta.
P-välja saab mähkida ka sildiga, mille sees saab SPAN-i “õppida” (jquery abil käigu pealt).
See kõik toimib, aga mitte parim viis rakendamine. Miks? Kuna sisendvormis on liiga palju täiendavat HTML-koodi, mida me ei vaja. Tuleb jälgida.
Teeme seda nii, nagu mina seda enda jaoks tegin. Minu arvates on see kõige õigem lahendus, kuigi keegi seda ei tee. Ausalt öeldes pole ma näinud kedagi teist seda tegemas... kui tead, siis kirjuta mulle tunni lõpus kommentaariks.
Mida me hakkame tegema? Me kirjutame lihtne vorm, ilus ja puhas semantiline kood, ilma tarbetute siltideta.
Kuna inimesed täidavad iga välja eraldi, saame seda jälgida ja kinnitada jooksvalt: - Määrake selle asukoht aknas (ülemine vasak nurk)
- Määrake selle laius
- Nii saame teada, kus on selle lõpp.
- Lisame valideerimisinfo kindla ID-ga DIV-plokki konkreetsest väljast paremale. Määrame ka vastavad klassid .correct või .incorrect.
Märkus. See on vastuvõetav ka inimestele, kes ei kasuta brauseris JavaScripti. Need kinnitatakse serveri poolel.
Projekti struktuur Peame looma kolm faili:
index.html
stiil.css
validate.js
Vaatame kõike samm-sammult... kõigepealt HTML-kood, seejärel vajalik CSS-stiilid, keskendume hiljem peamisele jQuery vormi valideerimisskriptile.
HTML-i kirjutamine Teeme selle kõik lahti...
1. samm - looge põhiline HTML kood Alustamiseks looge fail index.html ja kleepige see põhikood sinna. Näete, et lisame jQuery faili allpool, enne validation.js-i, mis sisaldab meie valideerimisskripti.
2. samm – looge kolmeks osaks jagatud kujund Loome kolmeosalise vormi, et näha, kuidas erinevaid sisestusvälju ja kabe valideerida. Jaotamiseks kasutame iga jaotise pealkirjadeks FIELDSET ja LABEL:
Isikuandmed (kasutajanimi, sünnipäev, sugu, sõiduk).
E-post (kasutaja e-posti sisestusväli).
Minust ( lühike teave kasutaja kohta). Vormi reaalajas kinnitamine jQuery isikliku teabe e-postiga Teie kohta 3. samm – lisage väljad ja kinnitamisnupp Suurepärane, nüüd loome oma vormi jaoks mõned sisestusväljad. Meie tunni jaoks valisime spetsiaalselt mitu erinevat valdkonda:
- Kolm INPUT väljad(kasutajanimi, sünniaeg, meiliaadress).
- RADIO nupud soo valimiseks.
- MÄRKUSKAST jaoks Sõiduk kasutaja.
- TEXTAREA kasutajateabe jaoks.
- NUPP „Kinnita” nupu jaoks.
Mähkime iga LABLE ja sisestusvälja P-sildisse, et eraldada see eraldi plokkideks. Nüüd sinu oma lõplik fail index.html näeb välja selline:
Vormi reaalajas kinnitamine jQuery isikliku teabe abil
Täisnimi:
Sünnipäev (pp-kk-aaaa):
Mina olen: Mees Naine
Oman: auto lennuk jalgrattalaev
Meil Meil ( [e-postiga kaitstud]):
Sinust Räägi meile natuke endast:
Esita
See võib tunduda pisut hirmutav, kuid selle põhjuseks on asjaolu, et meie vormil on palju sisestusvälju. Tegelikult pole siin midagi keerulist. Salvestage oma fail ja vaadake oma brauserist, mis juhtub. Nüüd kaunistame veidi...
CSS-i lisamine Kuna CSS-stiil ei ole tänase õpetuse põhiteema, siis me sellel pikemalt ei peatu. Vajame lihtsalt seda CSS-koodi, et vorm näeks kena välja ja kõik plokid oleksid paigas.
Looge fail style.css ja kleepige sellesse allolev kood. Nüüd näeb tulevase jquery valideerimisega vorm välja hämmastav. Pole see?
Keha ( taust: #efefef; veeris: 0; polster: 0; ääris: puudub; teksti joondus: keskel; font: tavaline 13px Georgia, "Times New Roman", Times, serif; värv: #222; ) #content ( laius: 500 pikslit: ääris-ala: 25px: 1px - ääris: 7px; 7px raadius: tavapärane 30px Verdana, Arial, sans-shadow: 1px 1px #fff; sisend; : 3px; ) silt ( kursor: kursor; ) .block ( ekraan: plokk; ) väike ( tähevahe: 1px; fondi suurus: 11 pikslit; fondi stiil: kaldkiri; värv: #9e9e9e; ) .info ( text- joondamine: 5px; -webkit-box-shadow: -1px 1px 2px #a9a9a9; kast-vari: -1px 1px 2px #a9a9a9; ) .error ( taust: #f60000; ääris: 3px solid #d50000; ) .correct ( taust: #56d800; ääris: 3px solid #008000; ) .wrong ( font-weight: bold; color: #e90000; ) .normal ( fondi kaal: tavaline; värvus: # 222; ) # saata ( taust: # 3f5a81; laius: 100%; ääris: 5 pikslit, ühtlane # 0F1620; font: paks 30 pikslit Verdana, sans-serif; värv: # fafafa; tekst- vari: 1px 1px 1px #0F1620; -webkit-border-radius: 7px) #send:hover (taust: #4d76b1; ääris: 5px solid #253750; color: #fff; ) #send: (teksti taane: -10 pikslit; )
jQuery vormi valideerimise kirjutamine See on tunni kõige huvitavam ja põnevam osa. Kuid kõigepealt peame mõtlema ja kirjeldama oma töö põhipunkte. Peate kõike planeerima.
Planeerivad Enne kirjutamist küsige endalt kolm küsimust:
Mida me sellest skriptist vajame?
Kuidas me seda teha tahame?
Kuidas me selle saavutame?
See on selge, me tahame, et skript vormi kinnitaks. Aga kuidas? Soovime, et see teeks seda reaalajas (kui kasutaja lõpetab sisestusvälja täitmise) ja kui klõpsate nuppu "Kinnita". Seetõttu peame kirjutama mitu funktsiooni: iga sisestusvälja jaoks eraldi ja kõigi vormide jaoks (mida kutsutakse, kui klõpsate nuppu „Kinnita”).
Koodi kordamise vältimiseks peame looma JavaScripti objekt selle jaoks.
Mida me selleks vajame? Meie puhul nimetatakse JS-objekti jVal, see sisaldab järgmisi meetodeid:
- jVal.fullName
- jVal.sünnikuupäev
- jVal.sugu
- jVal.vehicle
- jVal.email
- jVal.umbes
Muutuja, mis sisaldab olekut praegune viga- jVal.errors. Ja meetod, mis kontrollib vigade olemasolu ja kinnitab vormi esitamise või lükkab selle tagasi. Kui leitakse vigu, suunab see kasutaja vormi algusesse, kus saab kõik väljad õigesti täita.
Meetodi nimi on jVal.sendIt
Nüüd saame hakata arenema jQuery skript vormi kinnitamine. Kui kirjutame esimese meetodi, läheb kõik lihtsamalt ja kiiremini.
Alustame tööd Koodi alus on lihtne, selles süntaksis sisaldub absoluutselt kogu jquery kood:
$(dokument).ready(function())( jVal = ( ); ));
Kasutajanime välja kinnitamine Meie esimene meetod töötleb välja "kasutajanimi". Kleepige see jVal objekti sisse, nagu on näidatud näites:
Var jVal = ( "täisnimi" : funktsioon() ( ) );
Nüüd kirjutame meetodi sisse paar rida koodi. Lihtsalt kleepige need sisse ja me vaatame järgmisena, mida see tähendab:
$("keha").append(""); var nameInfo = $("#nameInfo"); var ele = $("#täisnimi"); var pos = ele.offset();
1. rida: lisame dokumendile DIV ploki. Klassi info, annab teatud stiili plokile, mis on määratletud failis style.css, samuti muudab selle nähtamatuks, kasutades display:none; Leidke ID, see on selleks, et teil oleks kiire juurdepääs sellesse plokki ja sellega manipuleerida jQuery abil. See DIV-plokk sisaldab väljade kinnitamise teavet.
3. rida: kirjutame sellele plokile väljakutse muutujas, kuna me kasutame seda suur hulküks kord.
4. rida: nagu ka eelmisel juhul, salvestame muutujasse ühenduse täisnimeväljaga. Kasutame seda ka palju kordi.
Funktsioon jQuery offset() tagastab elemendi praeguse asukoha dokumendi suhtes. Tagastati objektina, mis sisaldab ülemist ja vasakpoolset atribuuti. Kasutame seda funktsiooni ele-s sisendvälja asukoha määramiseks.
Lisame nüüd veel paar rida...
NameInfo.css(( üleval: pos.top-3, vasakul: pos.left+ele.width()+15 ));
Nagu näete, hakkame tegutsema nameInfo ploki stiilidega. Täpsemalt määrame selle asukoha sisestusväljast paremale. Selleks liigutame seda 3 pikslit ülespoole (2. koodirida) ja 15 pikslit väljast paremale (3. koodirida).
Oleme kirjutanud 50% esimesest meetodist, toome selle lõpuni. On aeg kindlaks teha, kui õigesti kasutaja andmed sisestas, ja tegutseda...
If(ele.val().pikkus< 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äe hea välja? Pole midagi karta...
1. rida: kontrollime, et kasutaja sisestatud nimi ei oleks lühem kui 6 tähemärki.
2. rida: määrake muutuja jVal.errors väärtuseks true, kuna oleme tuvastanud, et kasutajanimi on liiga lühike. Kasutame seda edasi.
3. rida: hakkame tegutsema oma nameInfo elemendiga (milles kuvame teavet). Esiteks eemaldame klassi õige ja määrame klassi vea. Järgmisena sisestame elemendi nameInfo sisu, see on teave, et nimi peab olema pikem kui 6 tähemärki. Ja lõpuks muudame oma sõnumi kasutajale nähtavaks.
4. rida: hakkame manipuleerima oma ele-elemendiga (kasutajanime sisestusvorm). Eemaldame tavalise klassi ja määrame selle valele.
5. rida: kui kasutajanimi on piisavalt pikk, siis...
6. rida: hakkame manipuleerima elemendi nameInfoga. Kui klassi viga on määratud, eemaldame selle ja määrame klassi õigeks. Sisestame sisse "linnu", et mõista, et kõik on korras. Ja kuvab kasutajale sõnumi.
7. rida: töötame ele-elemendiga. Eemaldame vale klassi, kui see on rakendatud, ja rakendame tavaklassi.
Oleme loonud oma esimese valideerimismeetodi! On aeg seda testida. Peame olema kindlad, et meie meetodit kutsutakse välja, kui kasutaja on oma nime sisestamise lõpetanud. Selle rakendamiseks peame toimingule lisama sündmuse. Kasutame funktsiooni change(). Kleepige allolev näidiskood objekti jVal alla:
$("#täisnimi").change(jVal.fullName);
Mida see tähendab inimkeel: Kui kasutaja muudab välja "Täisnimi" väärtust ja on sellega siis tehtud, kutsutakse välja fullName meetod, mis kinnitab välja.
Teie fail validate.js peaks nüüd sisaldama järgmist koodi:
< 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);
});
Sünnikuupäeva välja kinnitamine Nüüd läheb kõik kiiremini. Peame lihtsalt koopia tegema fullName meetodist ja tegema mõned muudatused.
Nüüd kopeerige meetod fullName, kleepige see alla ja nimetage see ümber sünnikuupäevaks. Ja tehke järgmised muudatused:
- Kõikjal, kus nameInfo kuvatakse, asendage see sünniteabega
- #täisnimi asemel kasutage muutuja ele jaoks #birthday
- Kleepige see mall regulaaravaldis allpool on birthInfo.css() avaldis:
var patt = /^(2)\-(2)\-(4)$/i; - Meie vana if() avaldis peaks olema:
if(!patt.test(ele.val())) - Selle välja sõnum on järgmine: sisestage kuupäev õiges vormingus
Sünnikuupäeva meetod peaks pärast nende muudatuste tegemist välja nägema järgmine:
"sünnikuupäev" : funktsioon ()( $("body").append(""); var birthInfo = $("#birthInfo"); var ele = $("#sünnipäev"); var pos = ele.offset( ); birthInfo.css(( üleval: pos.top-3, vasakul: pos.left+ele.width()+15 )); /i; if(!patt.test(ele.val())) ( jVal.errors = true; birthInfo.removeClass("correct").addClass("error").html("← sisestage kuupäev õiges vormingus ").show(); ele.removeClass("normal").addClass("wrong"); ) else ( birthInfo.removeClass("error").addClass("correct").html("√").show (); ele.removeClass("vale").addClass("tavaline" ) )
Kasutades regulaaravaldist (rida 14), kontrollime, et kuupäev oleks vormingus 28.03.1987. 16. real kontrollime, et kasutaja sünnikuupäev ühtiks regulaaravaldise mustriga.
Ja loomulikult peame sünnikuupäeva väljale lisama muutuse() sündmuse:
$("#sünnipäev").change(jVal.sünnikuupäev);
Nüüd on meil veel üks töötav jQuery vormi valideerimismeetod. Suurepärane töö!
Valideerimine valdkonnas muutunud Jällegi kopeerige meetod fullName, nimetage see sugu ümber ja tehke järgmised muudatused:
- Nimetage kogu nameInfo ümber nimeks genderInfo
- #täisnimi asemel kasutage muutuja ele jaoks #woman
- Muutke avaldis genderInfo.css() ülemine muutuja top: pos.top-10 ja vasakult vasakule: pos.left+ele.width()+60
- Meie if() lause peaks olema:
if($("sisend:kontrollitud").pikkus === 0) - Sõnum kasutajale on järgmine: kas olete mees või naine?
Selline peaks soomeetod pärast muudatusi välja nägema:
"sugu" : funktsioon ()( $("body").append(""); var genderInfo = $("#genderInfo"); var ele = $("#naine"); var pos = ele.offset( ); genderInfo.css(( üleval: pos.top-10, vasakul: pos.left+ele.width()+60 )); if($("input:checked").length === 0) ( jVal .errors = true; genderInfo.removeClass("õige").addClass("error").html("← kas sa oled mees või naine?").show("normaalne").addClass ("vale"); else ( genderInfo..removeClass("error").addClass("correct").html("√").show(); ele.removeClass("wrong").addClass("normaalne " ) ) )
14. real kontrollime, kui palju raadiovalijaid on valitud. Kui 0, siis kasutaja ei valinud midagi, kuvame veateate.
Ja nagu alati, lisame soopõhise meetodi raadionuppe:
$("sisend").change(jVal.gender);
Valideerimise kontrollijad – sõiduki omand Nüüd kopeerime soomeetodi ja nimetame selle ümber sõidukiks, tehke järgmised muudatused:
- Asendage kogu genderInfo sõidukiinfoga
- #woman asemel sisestage #ship for ele.
- Avaldis vehicleInfo.css() tuleb vasakule väärtus jätta: pos.left+ele.width()+40
- Meie if() lause peaks nüüd olema:
if($("sisend:kontrollitud").pikkus
