Selles õpetuses saate teada, kuidas kasutada HTML atribuute required ja pattern keerukate valideerimiste rakendamiseks oma veebi vormidele. Need funktsioonid on eriti kasulikud tagamaks, et kasutaja sisendid vastavad soovitud formaadile ning et tühjad väljad ei saadeta. Teid juhendatakse põhiliste sammude kaudu ning näete, kuidas saate neid atribuute oma vormides tõhusalt kasutada.
Olulisemad teadmised
- Atribuut required tagab, et sisestusväli oleks täidetud.
- Atribuudi pattern abil saate määrata regulaarse väljendmustriga valideerimise konkreetsetele formaatidele.
- Kasutajasõbralikud veateated on olulised positiivse kasutajakogemuse tagamiseks.
Samm-sammult juhend
required-atribuudi kasutamine
Selleks, et tagada, et sisestusväli peab olema täidetud, saate kasutada required-atribuuti. Lihtsalt lisage atribuut oma -sildile. Pole vajalik väärtust määrata; atribuudi lihtsalt seadistamine piisab.
Kui vorm on tühi ja proovite seda saata, kuvab brauser teile veateate, et väli peab olema täidetud. Seega tagab required-atribuut, et sisestamine on kohustuslik.
Kombineerimine required-atribuudiga koos teiste atribuutidega
Lisaks required-atribuudile saate määrata ka väärtused minlength ja maxlength, et piirata kasutaja sisestatavate märkide arvu.
Kui näiteks määratlete, et tuleb sisestada vähemalt 10 märki, töötab see samuti koos required-atribuudiga. Kui kasutaja sisestab vähem kui 10 märki, ei läbi valideerimist.
Tutvustus pattern-atribuudile
Pattern-atribuut võimaldab teil ette anda konkreetse sisestuse valideerimise regulaarsete väljendite abil. Siin määratlete regulaarse väljendimustri (regex) stringi kujul, mis peaks sisestatud teksti valideerima.
Lihtne näide regex-mustrist võiks olla, et kasutaja peab sisestama mingi stringi, millele järgneb "ABC" lõpus. See võiks välja näha järgmiselt: .*ABC$.
Vigade teade ebasobivate sisestuste korral
Kui kasutaja sisestab midagi, mis ei vasta määratud mustrile, saab ta geneerilise veateate, nt "please match the requested format".
Kasutajate abistamiseks on oluline pakkuda mõistlikumat veateadet. Seda saate teha, kasutades title-attribuuti. Pealkiri kuvatakse kasutajale vihjena, kui ta hiirega sisestusvälja kohal liigub.
Kasutajaliidese parendamine koos title-attribuudiga
Pealkirja-attribuudi abil saate anda arusaadavamat tagasisidet selle kohta, mis sisestusväljale oodatakse. Näiteks võiksite kasutada pealkirja "Sisestage ID miinus viis numbrit", et selgitada kasutajale, millist sisestust oodatakse.
Konkreetsete sisestusmustrite valideerimine
Veel üks näide on valideerimine konkreetsele formaadile, mis aktsepteerib ainult numbreid. Võite regex-mustri konfigureerida nii, et see algab konkreetse prefiksiga ja lubab vaid viis numbrit.
Kui kasutaja sisestab liiga palju või liiga vähe numbreid või isegi tähti, siis valideerimine ebaõnnestub.
Validatsiooniga seotud järeldus
Kasutades required ja pattern kombinatsiooni, saate luua sisendvälju, mis tagavad mitte ainult selle, et väli on täidetud, vaid ka selle, et sisendid vastavad soovitud formaadile. Lisaks võimalus pakkuda kohandatud veateateid parandab oluliselt kasutajakogemust.
Kokkuvõte
Selles õpetuses õppisite, kuidas kasutada atribuute required ja pattern keeruliste valideerimiste loomiseks veebivormides. Nende aspektide abil tagatakse, et kasutajasisendid vastavad konkreetsetele nõuetele ja veateated saab kohandada vastavalt kasutajakommunikatsioonile.
Korduma kippuvad küsimused
Mis on required-atribuudi eesmärk?Required-atribuut tagab, et välja tuleb täita enne vormi esitamist.
Kuidas kasutada pattern-atribuuti?Pattern-atribuut võimaldab teil kasutada regulaaravaldismustrit, et tagada, et sisestus vastab kindlale formaadile.
Kuidas saan kasutajatele selgemini edastada, mida sisestada?Kasutades title-atribuuti, saate kuvada kasulikku teavet oodatavate sisestuste kohta, mis ilmuvad tööriistaipikuna, kui kasutaja hiirega sisestusvälja kohal liigub.
