Phenquestions
Potrditev obrazca je osnovni in najpomembnejši del procesa spletnega razvoja. Običajno preverjanje obrazca poteka na strani strežnika. Validacija obrazca pomaga pri prikazovanju sporočil o napakah uporabniku, če so na voljo nepotrebni ali napačni podatki ali če obvezno polje ostane prazno. Če strežnik najde napako, jo vrne nazaj; nato uporabniku prikažemo sporočilo o napaki. Toda na sprednjem delu lahko uporabimo javascript za potrditev podatkov obrazca in prikaz napak takoj. V tem članku bomo izvedeli osnovno preverjanje veljavnosti obrazca v javascriptu. Torej, pojdimo naravnost na primere in poglejmo, kako lahko to storimo v javascriptu.
Primeri
Najprej predpostavimo obrazec z imenom »testForm«, v katerem imamo vnosno polje z oznako »Uporabniško ime« in vhodni tip odda v našo datoteko HTML. V oznaki obrazca smo ustvarili dogodek onsubmit, v katerem zaključujemo in vračamo funkcijo validateFunc ().
V datoteko skripta bomo zapisali definicijo funkcije validateFunc (), ki se bo izvedla vsakič, ko uporabnik pritisne gumb za oddajo. V tej funkciji bomo potrdili polje za vnos uporabniškega imena. Predvidevamo, da želimo potrditi, da je polje uporabniškega imena prazno ali ne, ko uporabnik pritisne gumb za oddajo.
Torej, za potrditev polja z uporabniškim imenom. Najprej dokumentu dodelimo spremenljivko.testForm, samo zato, da bi kodi dali čist in razumljiv videz. Nato bomo v definicijo funkcije zapisali kodo za preverjanje. Za preverjanje praznega polja obrazca bomo napisali izjavo if. Če je polje z uporabniškim imenom prazno, se prikaže opozorilno polje z napako, znova se osredotočimo na polje z uporabniškim imenom in vrnemo false, da obrazec ne bo poslan. V nasprotnem primeru, če opravi preverjanje in se podatki potrdijo, vrnemo funkcijo true.
var theForm = dokument.testForm;// Koda za preverjanje obrazca
function validationFunc ()
če (obrazec.ime.vrednost == "")
opozorilo ("ime je prazno");
oblika.ime.osredotočiti ();
vrni false;
vrnitev (true);
Po pisanju vse te kode. Če zaženemo kodo in kliknemo gumb za oddajo, ne da bi karkoli zapisali v polje obrazca.
Kot lahko vidite na spodnjem posnetku zaslona, v opozorilno polje vrne napako.
To je zelo osnovni, a dober primer za začetek izvajanja preverjanja obrazca. Za nadaljnjo izvedbo, na primer preverjanje veljavnosti več obrazcev ali če želite preveriti tudi dolžino znaka.
V ta namen predpostavljamo dve polji obrazca v oznaki obrazca z oznako "email" in "password" v naši datoteki HTML.
Za preverjanje v javascriptu bomo v definicijo funkcije datoteke skripta znova dodali stavek if za preverjanje veljavnosti polj obrazca za e-pošto in geslo. Denimo, da želimo v e-poštnem polju uporabiti več preverjanj, na primer polje ne sme biti prazno in njegova dolžina ne sme biti manjša od 10 znakov. Torej, lahko uporabimo ALI “||” v izjavi if. Če pride do katere od teh napak, se prikaže opozorilno polje s sporočilom o napaki, ki ga želimo prikazati, se osredotoči na polje e-poštnega obrazca in vrne funkciji false. Če želimo v polju za geslo uporabiti preverjanje dolžine znakov, lahko to storimo.
var theForm = dokument.testForm;// Koda za preverjanje obrazca
function validationFunc ()
če (obrazec.ime.vrednost == "")
opozorilo ("ime je prazno");
oblika.ime.osredotočiti ();
vrni false;
če (obrazec.E-naslov.vrednost == "" || oblika.E-naslov.vrednost.dolžina < 10)
opozorilo ("E-pošta je neprimerna");
oblika.E-naslov.osredotočiti ();
vrni false;
če (obrazec.geslo.vrednost.dolžina < 6)
opozorilo ("Geslo mora biti dolgo 6 znakov");
oblika.geslo.osredotočiti ();
vrni false;
vrnitev (true);
Ko napišete vso to kodo, znova naložite stran, da bo posodobljena. Zdaj bodisi pustimo prazno e-poštno polje ali napišemo e-poštno sporočilo manj kot 10 znakov. V obeh primerih se prikaže napaka »E-pošta je neprimerna«.
Tako lahko v JavaScript uporabimo osnovno preverjanje veljavnosti obrazca. Preverjanje podatkov lahko uporabimo tudi na strani odjemalca z uporabo regularnega izraza ali s pisanjem lastne funkcije po meri. Recimo, da želimo uporabiti preverjanje veljavnosti podatkov v e-poštnem polju. Redovni izraz bi bil takšen za preverjanje e-pošte.
če (/ ^ [a-zA-Z0-9.!# $% & '* + / =?^ _ '| ~ -] [e-pošta zaščitena] [a-zA-Z0-9 -] + (?: \.[a-zA-Z0-9 -] +) * $ /.test (obrazec.E-naslov.vrednost))
opozorilo ("E-pošta je neprimerna");
oblika.E-naslov.osredotočiti ();
vrni false;
To je bil le osnovni prikaz preverjanja veljavnosti podatkov z uporabo regularnega izraza. Toda nebo je odprto za letenje.
Zaključek
Ta članek zajema osnovno preverjanje veljavnosti obrazca v javascriptu. Preizkusili smo tudi preverjanje podatkov z uporabo regularnega izraza. Če želite izvedeti več o regularnem izrazu, imamo poseben članek, povezan z regularnim izrazom na linuxhint.com. Za učenje in razumevanje konceptov javascripta in bolj uporabne vsebine, kot je ta, nadaljujte z obiskom linuxhint.com. Hvala vam!
