Phenquestions
Vormi valideerimine on veebiarenduse peamine ja kõige olulisem osa. Tavaliselt tehakse vormi valideerimine serveri poolel. Vormi valideerimine aitab kuvada kasutajale tõrketeateid, kui on esitatud tarbetuid või valesid andmeid või kohustuslik väli on tühi. Kui server leiab mõne vea, viskab ta selle vea tagasi; siis kuvame kasutajale tõrketeate. Kuid vormi andmete kinnitamiseks ja vigade kuvamiseks saame esipaneelil kasutada javascripti. Selles artiklis õpime põhivormi kinnitamist javascriptis. Niisiis, läheme otse näidete juurde ja vaatame, kuidas saaksime seda javascripti abil teha.
Näited
Kõigepealt eeldame vormi nimega "testForm", kus meil on sisendväli sildiga "Kasutajanimi" ja sisendtüüp esitatakse meie HTML-failis. Vormimärgendis oleme loonud onsubmit-sündmuse, mille käigus teeme sulgemise ja tagastame funktsiooni validateFunc ().
Skriptifaili kirjutame funktsiooni definitsioon validateFunc (), mis käivitatakse iga kord, kui kasutaja tabab nuppu Esita. Selles funktsioonis kinnitame kasutajanime sisestusvälja. Oletame, et tahame kinnitada, kas kasutajanime väli on tühi või mitte, kui kasutaja vajutab nuppu Esita.
Niisiis, kasutajanime välja kinnitamiseks. Esmalt määrame dokumendile muutuja.testForm, lihtsalt selleks, et anda koodile puhas ja arusaadav ilme. Seejärel kirjutame funktsiooni definitsioonis valideerimiseks koodi. Tühja vormivälja kontrollimiseks kirjutame if-lause. Kui kasutajanime väli on tühi, kuvame vea näitamiseks hoiatuskasti, keskendume uuesti kasutajanime väljale ja tagastame vale, et vormi ei saadetaks. Muul juhul, kui see läbib kontrolli ja andmed valideeritakse, naaseme funktsiooni truuks.
var theForm = dokument.testForm;// Vormi kinnitamise kood
function validationFunc ()
kui (vorm.nimi.väärtus == "")
hoiatus ("nimi on tühi");
theForm.nimi.fookus ();
return false;
tagasi (tõene);
Pärast kogu selle koodi kirjutamist. Kui käivitame koodi ja klõpsame nuppu Esita, ilma et vormiväljale midagi kirjutaksime.
Nagu võite näha allpool oleval ekraanipildil, viskab see hoiatuskasti vea.
See on vormi valideerimise rakendamise alustamiseks väga lihtne, kuid siiski hea näide. Edasiseks rakendamiseks, näiteks mitu vormi valideerimist või soovite kontrollida ka tähemärgi pikkust.
Selleks eeldame kõigepealt, et meie HTML-failis on vormilipil kaks vormivälja sildiga “email” ja “password”.
Javascripti kinnitamiseks paneme skriptifaili funktsiooni määratlusse uuesti if-avalduse e-posti ja parooli vormiväljade valideerimiseks. Oletame, et soovime meiliväljale rakendada mitu valideerimist, nagu väli ei tohiks olla tühi ja selle pikkus ei tohiks olla väiksem kui 10 tähemärki. Seega võime kasutada VÕI “||” avalduses if. Kui mõni neist tõrgetest ilmneb, kuvatakse selles hoiatuskast koos tõrketeatega, mida soovime näidata, keskenduge meilivormi väljale ja tagastage funktsioonile vale. Samamoodi saame seda teha ka siis, kui soovime parooliväljale rakendada märkide pikkuse kontrolli.
var theForm = dokument.testForm;// Vormi kinnitamise kood
function validationFunc ()
kui (vorm.nimi.väärtus == "")
hoiatus ("nimi on tühi");
theForm.nimi.fookus ();
return false;
kui (vorm.e-post.väärtus == "" || theForm.e-post.väärtus.pikkus < 10)
hoiatus ("E-post on sobimatu");
theForm.e-post.fookus ();
return false;
kui (vorm.parool.väärtus.pikkus < 6)
märguanne ("Parool peab olema 6 tähemärki pikk");
theForm.parool.fookus ();
return false;
tagasi (tõene);
Pärast kogu selle koodi kirjutamist laadige leht uuendatud koodi saamiseks uuesti. Nüüd kas jätame tühja meilivälja või kirjutame vähem kui 10 tähemärgiga meili. Mõlemal juhul kuvatakse selles tõrge „E-post on sobimatu”.
Nii saame põhivormi kinnitamist JavaScripti rakendada. Andmete kinnitamist saame rakendada ka kliendipoolel, kasutades Regexi või kirjutades omaenda kohandatud funktsiooni. Oletame, et me tahame andmete valideerimist rakendada meiliväljal. Regex on selline meilisõnumi kinnitamiseks.
kui (/ ^ [a-zA-Z0-9.!# $% & '* + / =?^ _ '| ~ -] [meiliga kaitstud] [a-zA-Z0-9 -] + (?: \.[a-zA-Z0-9 -] +) * $ /.test (theVorm.e-post.väärtus))
märguanne ("E-post on sobimatu");
theForm.e-post.fookus ();
return false;
See oli lihtsalt andmete valideerimise regulaarne näitamine. Aga lendamiseks on taevas avatud.
Järeldus
See artikkel käsitleb JavaScripti põhivormi kinnitamist. Oleme proovinud ka regexi abil andmete valideerimisse sisse hiilida. Kui soovite regexi kohta rohkem teada saada, on meil spetsiaalne artikkel, mis on seotud regexiga linuxhintis.com. Javascripti mõistete ja sellise kasuliku sisu õppimiseks ja mõistmiseks külastage linuxhinti.com. Aitäh!
