Kuidas mõista, mis on HTML5 vormi valideerimine ja ujuv sisendsilt
Vormi valideerimise rakendamine mängib olulist rolli, et pahatahtlikud kasutajad ei sisestaks vormiväljadele jaburat teksti. Samuti piirab see kogenematutel kasutajatel vormile vale teabe ekslikult sisestamist.
Loomulikult ei tahaks te kasutajatelt ebaturvalisel viisil valeandmeid koguda. Seega on hädavajalik määratleda vormide valideerimisreeglid.
Oleme aastaid kasutanud kliendi poolel vormi valideerimise juurutamiseks kompleksset ja TL;DR (st liiga pikk; ei lugenud) JavaScripti koodi. Õnneks saame nüüd "HTML5 vormi valideerimise" väljalaskmisega lisada vormidele kinnitusi minimaalse JavaScriptiga.
Kuigi uusim HTML-versiooni väljalase pakub mitmeid eeliseid, on kõige olulisem aga see, et see on varustatud paljude uute sisestusväljade ja atribuutidega, mis on vajalikud vormi kinnitamiseks, ilma et oleks vaja kirjutada keerulist JS-i (lühend sõnast JavaScript) valideerimiskoodi.
Kuid pidage meeles, et kasutajad võivad vormi täitmisel kergesti pettuda, eriti kui nad saavad teada, et sisestatud andmed olid valed, võib nende pettumust veelgi suurendada. Kuid tänu HTML5-le saab ujuvate sisendsiltide lisamine vormi andmeid kinnitada samal ajal, kui kasutajad vormi täidavad. Nii saavad kasutajad kohe teada, kui nad sisestusväljadel vea teevad.
Näiteks allpool on Matt Smithi Dribble’i postitatud pilt, mis näitab, kuidas ujuv sildi muster vormile rakendatuna töötab:
See postitus kirjeldab, kuidas HTML5 vormile kinnituste lisamisel ujuvaid sisendsilte rakendada.
Aga enne kui alustad
Enamik teist võiks esmalt teada saada HTML5 vormi valideerimise protsessi. Lõppude lõpuks ei pruugi kõigil teist olla HTML5-vormi valideerimiskoodi kirjutamise kogemust. Samuti on võimalik, et te ei tea HTML5 äsja kasutusele võetud sisestusväljade ja atribuutide kohta.
Üksikasjalik ülevaade HTML5 vormi valideerimisest
Kui plaanite vormi valideerida, on soovitatav kõigepealt alustada serveripoolsest valideerimisest. Ja kui olete hea veebidisainer, lisage kliendipoolne valideerimine, mis aitab kasutajatel saada kohest tagasisidet, kas nad täidavad vormi õigete andmetega või mitte. Näiteks annab kasutajatele kohese tagasiside andmine e-posti aadressiväljale andmete sisestamisel neile teada, et sisestatud e-posti aadress oli kehtiv.
Üks suurepäraseid HTML5 funktsioone on see, et see aitab rakendada kliendipoolset valideerimist ilma skriptidest sõltumata. Pigem saate seda ülesannet täita, kasutades vormielementidel "valideerimisatribuute". Kõige tähtsam on see, et peate lihtsalt lisama sisestusväljale atribuudi „nõutav", ülejäänud eest hoolitseb teie brauser.
Siin on näide, mis selgitab nõutava atribuudi kasutamist sisestusväljale valideerimise lisamiseks:
Name: <input type="text" name="yourname" required>Ülaltoodud koodirida teadvustab teie brauserile, et nime INPUT välja tuleks pidada kohustuslikuks (st seda ei saa tühjaks jätta).
Nagu näete, kuvatakse sisestusväljale „Teie nimi” vastavas tekstikastis punane marker. Kuid niipea, kui nime sisestusväljale sisestatakse mõni tekst, muutub marker linnukeseks, mis näitab, et sisestatud väärtus on kehtiv.
Lisaks <input type="text">(st tekstisisestustüüpidele) toetab HTML5 nüüd mitmeid uusi sisestusvalikuid, nagu otsing, e-kiri, telefon, kellaaeg jne. Lihtsamalt öeldes saame HTML5-ga kirjutada alloleva koodirea:
<input type="text" name="email">millessegi taoliseks:
<input type="email" name="email">Lauaarvuti brauserid renderdavad ülaltoodud koodi nagu kõik standardsed tekstiväljad.
Veel üks oluline asi, mida tahaksin teie tähelepanu juhtida, on järgmine: kui proovite CodePen’i demos sisestada atribuute (nt kohustuslik või sisestustüüp=”email” isegi ilma sisuta), kuvatakse ikkagi veateade. sõnum nupu ‘ESITA’ klõpsamise kohta ilma kehtiva e-posti aadressita:
Eespool käsitletud näites näete, et brauser kuvab vaikimisi veateate. Aga mis siis, kui soovite sisendväärtusele rakendada oma (st kohandatud) valideerimisreeglit? Siin tuleb kasuks Regexi muster.
RegExi mustrite mõistmine
Võib-olla olete näinud mustreid e-posti aadressi (nt abc@a) sisestamisel. Ütlematagi selge, et soovite, et teie kasutajad sisestaksid tõelise e-posti aadressi. Ja teie andmetega sobiva mustri valiku määramine aitab sisestatud väärtust kinnitada. Näiteks saate tagada, et e-kiri ühtiks mustriga, mille lõpus on kolm või enam tähemärki. Selleks peate kasutama atribuuti „Mustri atribuut” ja regulaaravaldisi (RegEx).
RegEx on põhimõtteliselt keel, mida kasutatakse teksti sõelumiseks või sellega manipuleerimiseks. Enamasti kasutatakse regulaaravaldisi keerukate toimingute tegemiseks (nt otsimine ja asendamine) tekstiandmete paremaks moodustamiseks. Tänapäeval leiate regulaaravaldiste kasutamist peaaegu kõigis programmeerimis- ja skriptikeeltes. RegExi saab kasutada vormiväljadele sisestatud andmete kinnitamiseks, jõustades need sisestustüüpidele, kasutades mustri atribuuti järgmiselt:
<input id="phone" placeholder="111-111-1111" title="Text to convey pattern for telephone number" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">Kui valideerimisvigu ilmneb, saate määrata ka pealkirja atribuudi koos valideerimisveaga, et kuvada teade peale "Vale vorming!" kasutades allolevat koodirida:
<input type="email" placeholder="Email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Kindly enter a valid email address here.">Pidage meeles, et iga sisendi jaoks pole vaja absurdset mustrit kirjutada. Selle asemel peate paljudel juhtudel lihtsalt määrama nõutava atribuudi teatud tüüpi andmetele. Näiteks number üle 8 näeb välja selline:
<input type="number" min="8" required>Samuti pidage meeles, et mitte kõik brauserid ei toeta kõiki saadaolevaid valideerimisatribuute. Võtke näiteks Firefoxi brauser, mis ei ühildu minlength mustriga.
HTML5 vormi valideerimise kasutamise eelised
HTML5 vormi valideerimise rakendamise suurim eelis on vahetu tagasiside. Enamasti tõstetakse esile teatud märge, kui kasutajad täidavad vormis mõne välja, et teavitada neid, kas sisestatud väärtus oli kehtiv või mitte.
Nüüd, kui sisestate midagi tekstikasti, muutub äärise värv roheliseks järgmiselt:
Kuid nagu näete, on sellel lähenemisviisil ka varjukülg. Isegi kui lisate väljale "Eesnimi" kehtetu (või mittetäieliku) väärtuse, kuvatakse kasutajale märge, et väärtus on õige. Võib-olla võiksite mõelda :invalid:not(:empty)koodi lisamisele. Kahjuks selline loogika brauserite puhul ei tööta, kuna need peavad vormielemente tavaliselt tühjaks.
Huvitav, mida teha?
Võite proovida lisada koodi uue pseudovalija nimega ":placeholder-shown" järgmiselt:
<form>
<label>
<span>First Name</span>
<input type="text" pattern=".{4,}" placeholder=" " required title="Enter at least 4 characters.">
</label>
<button>Submit</button>
</form>Kuid näib, et enamik brausereid ei paku kohahoidjaga kuvamise tuge, seega on parem kirjutada skript klassi vahetamiseks, kui sisestusväli on tühi või mitte. Siin on sama JavaScripti kood:
$('input:empty, textarea:empty').addClass('empty');
$('input').keyup(function() {
if ($(this).val().trim() !== '') {
$(this).removeClass('empty');
} else {
$(this).addClass('empty');
}
});MÄRKUS. Ärge unustage ülaltoodud HTML-i märgistusest kohatäite elementi eemaldada.
Nüüd, kui käivitate ülaltoodud koodilõigu koos HTML5 märgistusega, näeb väljund välja järgmine:
Nagu näete, jääb tekstikasti värv punaseks, kuni väljale rakendatud valideerimine pole täidetud. Ja kui klõpsate nupul Esita, kuvatakse mittetäieliku nime sisestamisel veateade.
Kuid niipea, kui kasutaja sisestab täieliku (üle 3 tähemärgi), muutub tekstikasti äärise värv roheliseks.
Kuidas saate HTML5-sse lisada ujuva sisendi silti?
Ja nüüd arutleme HTML5 vormi kinnitamisel ujuva sisendsildi lisamise lähenemisviisi üle. See aitab parandada vormi välimust ja tunnetust. Siin on HTML-i märgistus.
Ujuva sildi mustri rakendamiseks peate lükkama märgendi otse <input>HTML-i märgistuses elemendi alla:
<form>
<label>
<input type="text" pattern=".{4,}" required title="Characters should not be less than 4.">
<span>Your Name</span>
</label>
<label>
<input type="email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Please enter a valid email.">
<span>Your Email</span>
</label>
<button>Submit</button>
</form>CSS näeb välja umbes selline:
label {
position: relative;
display: inline-block;
}
label span {
position: absolute;
left: 20px;
top: -2em;
font-size: .75em;
cursor: text;
color: #f27853;
transition: all 150ms ease;
}
input {
border: 1px solid #f2f2f2;
outline: none;
}
input:focus {
border-color: #d9d9d9;
}
input:valid {
border-color: #42d142;
}
input:invalid {
border-color: #ff8e7a;
}
input.empty {
border-color: #d9d9d9;
}
input.empty + span {
top: 50%;
transform: translateY(-50%);
font-size: 1em;
background: none;
color: #cccccc;
}
body {
display: flex;
min-height: 100vh;
background: #f1f1f1;
font-family: 'Lato', sans-serif;
font-size: 150%;
}
form {
margin: auto;
}
input, button {
padding: 15px 20px;
border-radius: 1px;
border: 2px solid #bdbdbd;
}
button {
border-color: #363636;
background: #363636;
color: #FFFFFF;
}Ja lõpuks kirjutage JavaScripti kood:
$('input:empty, textarea:empty').addClass('empty');
$('input').keyup(function() {
if ($(this).val().trim() !== '') {
$(this).removeClass('empty');
} else {
$(this).addClass('empty');
}
});Väljund:
Ujuvate sisendsiltide kasutamisel HTML5-s saate rakendada mitmeid efekte, näiteks:
- Lisage HTML5 vormi kinnitamise ajal sisse/välja tuhmumise efektiga ikoone.
- Raputage sisendit, kui sisestatud andmed on kehtetud.
- Muutke sisendite värv tuhmiks, kui need on õigesti täidetud.
Asjad, mida kaaluda
Kui töötate HTML5 vormile valideerimise juurutamisel, peate teadma:
- Brauseri tugi: HTML5 vormid töötavad kaasaegsetes brauserites ja IE10+ suurepärasel viisil. Kuigi IE versioon 9 ja vanemad versioonid ei toeta valideerimise pseudovalijaid, mis hoiavad teid vormi kujundamast, töötab see siiski õigesti.
- Hoiatus: üks asi, mida te ei saa HTML5 vormile kinnitamise rakendamisel teha, on valideerimissõnumite stiil. Selle põhjuseks on asjaolu, et brauserid on sellise funktsiooni keelanud.
Lõpusõnad
Vormi kinnitamiste rakendamine on teie saidile täiendava turvakihi lisamiseks ülioluline. Seda seetõttu, et see takistab pahatahtlikel kasutajatel teie vormiväljade väärtusena pahatahtlikku teksti lisada. Peale selle aitab kasutajatele kohese tagasiside andmine vormi valideeritud sisestusväljale sisendi sisestamisel parandada nende kasutuskogemust. Lõppude lõpuks ei pea nad kulutama aega, et tunnistada, et nad tegid vormi täitmisel vea. Kuid vormi kinnitamine ainult JavaScripti abil võib olla keeruline. Siin tuleb appi HTML5 vormi valideerimine.
Kui rakendate vormile valideerimist HTML5 abil, ei pea te kirjutama pikki ridu keerukast JS-koodist. Selle asemel saate rakendada vormi valideerimise reegleid minimaalse JavaScripti kodeerimisega. Kõige tähtsam on see, et HTML5 vormi valideerimisega on saadaval palju uusi funktsioone, näiteks ujuv sisendsilt, mis muudab vormi suurepäraseks, julgustades kasutajaid vormi esitama.