Phenquestions
Veidlapu validācija ir galvenā un vissvarīgākā tīmekļa izstrādes procesa sastāvdaļa. Parasti veidlapu pārbaude tiek veikta servera pusē. Veidlapas pārbaude palīdz lietotājiem parādīt kļūdas ziņojumus, ja ir norādīti nevajadzīgi vai nepareizi dati vai ja obligāts lauks ir atstāts tukšs. Ja serveris atrod kādu kļūdu, tas šo kļūdu atmet; pēc tam lietotājiem tiek parādīts kļūdas ziņojums. Bet, lai validētu veidlapas datus un uzreiz parādītu kļūdas, priekšpusē mēs varam izmantot javascript. Šajā rakstā mēs uzzināsim pamata veidlapu validāciju javascript. Tātad, ķersimies tieši pie piemēriem un redzēsim, kā mēs to varam izdarīt javascript.
Piemēri
Pirmkārt, mēs pieņemam veidlapu ar nosaukumu “testForm”, kurā mums ir ievades lauks ar etiķeti “Lietotāja vārds” un ievades veids tiek iesniegts mūsu HTML failā. Veidlapas tagā mēs esam izveidojuši notikumu onsubmit, kurā mēs veicam slēgšanu un atgriežam funkciju validateFunc ().
Skripta failā mēs ierakstīsim validateFunc () funkcijas definīciju, kas tiks izpildīta katru reizi, kad lietotājs noklikšķinās uz pogas Iesniegt. Šajā funkcijā mēs apstiprināsim lietotājvārda ievades lauku. Mēs pieņemam, ka mēs vēlamies apstiprināt vai nu lietotājvārda lauks ir tukšs, vai nē, kad lietotājs nospiež pogu Iesniegt.
Tātad, lai apstiprinātu lietotājvārda lauku. Vispirms mēs piešķiram dokumentam mainīgo.testForm, tikai lai piešķirtu kodam tīru un saprotamu izskatu. Tad funkcijas definīcijā mēs uzrakstīsim kodu validācijai. Lai pārbaudītu tukšo veidlapas lauku, mēs uzrakstīsim paziņojumu if. Ja lietotājvārda lauks ir tukšs, tiks parādīts brīdinājuma lodziņš, kurā tiks parādīta kļūda, atkal koncentrēsimies uz lietotājvārda lauku un atgriezīsim nepatiesu, lai veidlapa netiktu iesniegta. Pretējā gadījumā, ja tas iztur pārbaudi un dati tiks apstiprināti, mēs atgriezīsimies pie funkcijas.
var theForm = dokuments.testForm;// Veidlapas validācijas kods
function validationFunc ()
ja (veidlapa.nosaukums.vērtība == "")
trauksme ("vārds ir tukšs");
theForm.nosaukums.fokuss ();
atgriezties nepatiesa;
atgriešanās (taisnība);
Pēc visa šī koda uzrakstīšanas. Ja mēs izpildām kodu un noklikšķinām uz pogas Iesniegt, neko nerakstot formas laukā.
Kā jūs varat novērot zemāk pievienotajā ekrānuzņēmumā, tas brīdinājuma lodziņā rada kļūdu.
Šis ir ļoti vienkāršs, tomēr labs piemērs, lai sāktu lietot veidlapas validāciju. Tālākai ieviešanai, piemēram, vairākām veidlapu validācijām, vai vēlaties pārbaudīt arī rakstzīmju garumu.
Šim nolūkam vispirms domājam, ka mūsu HTML failā veidlapas tagā ir divi veidlapas lauki ar etiķeti “e-pasts” un “parole”.
Lai veiktu validāciju javascript, skripta faila funkcijas definīcijā atkal ievietosim if paziņojumu e-pasta un paroles veidlapas lauku validācijai. Pieņemsim, ka mēs e-pasta laukā vēlamies piemērot vairākas pārbaudes, piemēram, lauks nedrīkst būt tukšs un tā garumam jābūt ne mazākam par 10 rakstzīmēm. Tātad, mēs varam izmantot VAI “||” paziņojumā if. Ja rodas kāda no šīm kļūdām, tajā tiks parādīts brīdinājuma lodziņš ar kļūdas ziņojumu, kuru mēs vēlamies parādīt, koncentrēties uz e-pasta veidlapas lauku un funkcijai atgriezties false. Līdzīgi, ja mēs paroles laukā vēlamies piemērot rakstzīmju garuma pārbaudi, mēs to varam izdarīt.
var theForm = dokuments.testForm;// Veidlapas validācijas kods
function validationFunc ()
ja (veidlapa.nosaukums.vērtība == "")
trauksme ("vārds ir tukšs");
theForm.nosaukums.fokuss ();
atgriezties nepatiesa;
ja (veidlapa.e-pasts.vērtība == "" || theForm.e-pasts.vērtība.garums < 10)
brīdinājums ("E-pasts nav piemērots");
theForm.e-pasts.fokuss ();
atgriezties nepatiesa;
ja (veidlapa.paroli.vērtība.garums < 6)
brīdinājums ("Parolei jābūt 6 rakstzīmēm garai");
theForm.paroli.fokuss ();
atgriezties nepatiesa;
atgriešanās (taisnība);
Kad esat uzrakstījis visu šo kodu, atkārtoti ielādējiet lapu, lai atjauninātu kodu. Vai nu mēs atstājam tukšu e-pasta lauku, vai arī rakstām e-pastu, kurā ir mazāk par 10 rakstzīmēm. Abos gadījumos tajā tiks parādīta kļūda “E-pasts nav piemērots”.
Tātad, šādi mēs varam JavaScript lietot pamata veidlapu validāciju. Datu pārbaudi mēs varam piemērot arī klienta pusē, izmantojot Regex vai uzrakstot savu pielāgoto funkciju. Pieņemsim, ka mēs e-pasta laukā vēlamies piemērot datu validāciju. Regex būtu šāds, lai apstiprinātu e-pastu.
ja (/ ^ [a-zA-Z0-9.!# $% & '* + / =?^ _ '| ~ -] [aizsargāts ar e-pastu] [a-zA-Z0-9 -] + (?: \.[a-zA-Z0-9 -] +) * $ /.tests (theForm.e-pasts.vērtība))
brīdinājums ("E-pasts nav piemērots");
theForm.e-pasts.fokuss ();
atgriezties nepatiesa;
Tas bija tikai pamata datu validācijas demonstrējums, izmantojot regex. Bet, lai lidotu, debesis ir atvērtas.
Secinājums
Šis raksts attiecas uz pamata veidlapas validāciju javascript. Mēs arī esam mēģinājuši ielavīties datu validācijā, izmantojot regex. Ja vēlaties uzzināt vairāk par regex, mums ir īpašs raksts, kas saistīts ar regex par linuxhint.com. Lai uzzinātu un izprastu javascript jēdzienus un noderīgāku saturu, apmeklējiet linuxhint.com. Paldies!
