Share
TL; DR Înlocuiți validarea JavaScript cu validarea HTML5. Este mai ușor decât crezi și îți oferă o tonă de control și de control al stilului. Încercați această demonstrație:
Deci, trebuie să validezi un formular. Faceți ce trebuie și începeți cu validarea de la server. Apoi, dacă sunteți un bun designer de web, adăugați o validare a unei părți a clientului, astfel încât utilizatorii dvs. să obțină feedback cu privire la faptul că au completat corect formularul sau nu. Dacă sunteți un designer de web foarte bun, puteți chiar să faceți acest feedback instantaneu, astfel că utilizatorul este conștient că a introdus o adresă de e-mail validă de îndată ce devine o adresă de e-mail validă.
Accesați biblioteca preferată jQuery. Poate că sunteți chiar suficient de cool pentru a utiliza o bibliotecă de vanilie JavaScript.
Adăugați un marcaj suplimentar. Re-stil unele lucruri ... adăugați niște reguli de validare JavaScript. Conectați JavaScript la server prin AJAX. Puneți-vă capul de tastatură de câteva ori, pentru că nu ați făcut acest lucru în câteva luni și trebuie să căutați exact cum această bibliotecă de validare JavaScript face lucruri ... Și așa mai departe.
Ai imaginea. Nu e amuzant.
Ce se întâmplă dacă ați putea sări peste toate acele chestii JavaScript și doar să valideze cu validatori de atribute HTML5 și CSS?
În termeni agresivi: adăugați atribute cum ar fi necesar sau type = "email" la câmpuri și browser-ul dvs. face restul.
Continuați și încercați să trimiteți formularul în acest demo CodePen fără conținut. Apoi, încercați să o trimiteți fără o adresă de e-mail validă:
S-ar putea să fi observat că puteți introduce un e-mail de genul un @ o. În mod evident, doriți o adresă de e-mail reală, prin specificarea unui model precis pe care trebuie să îl corespundă datele noastre, putem valida ceea ce sa introdus. Să ne asigurăm că se potrivește cu modelul de a avea un punct și două sau trei caractere la sfârșit. Putem face acest lucru folosind model atribut și regex.
Dacă sunteți tentativă cu privire la învățarea regex, trebuie să o depășiți. Regex este puternic nebun și în orice tip de programare pe care o veți face vreodată.
Sunt îngrozitor la regex complicat, așa că am Googled pentru "e-mail regex" (de când sunt sigur că acest lucru a fost rezolvat deja) și a ajuns să găsească unul pe regular-expressions.info. Iată regex-ul nostru pe regex101.com (o resursă foarte utilă pentru testarea expresiilor dvs. regulate).
^ [A-Za-Z0-9 ._% + -]. + @ [A-Za-Z0-9 .-] + \ [A-Za-z] 2 $
Dacă citiți un pic despre modelul pe care îl veți realiza, autorul exclude potrivirile minuscule, deoarece se așteaptă să utilizați un pavilion insensibil pentru majuscule. Modelele de intrare HTML5 nu acceptă pavilioane, astfel încât să se obțină litere mici, trebuie să adăugăm gama mare și mică (de ex. A-Za-z). Puteți citi exact ceea ce face fiecare parte a modelului în panoul din dreapta.
Pentru a face erorile de validare să arunce altceva decât "Format greșit!", Putem specifica a titlu atribut cu o eroare de validare, astfel:
Încercați acum intrarea de e-mail în acest demo:
Nu vă faceți griji, nu va trebui să scrieți modele nebune pentru fiecare intrare pe care o aveți. De cele mai multe ori, veți dori doar să solicitați ceva și asigurați-vă că este un anumit tip de date. De exemplu, un număr de peste 5 ar putea să arate ca .
Rețineți că nu toate browserele acceptă toate atributele de validare diferite. De exemplu, FireFox nu acceptă Minlength. model are totuși un suport destul de bun, astfel încât să puteți replica întotdeauna funcționalitatea. Minlength pot fi replicate cu model = "3" Unde 3 este totuși mult timp necesar.
Dacă nu găsiți un model pe care aveați acces la vechea dvs. bibliotecă JavaScript, probabil că îl veți găsi prin navigarea în codul sursă, deoarece în cele din urmă biblioteca JavaScript se potrivește exact acelorași modele regex ca și noi.
Nu ar fi frumos ca intrările noastre să afișeze un fel de indicație când era valabilă? Din fericire, există a :valabil Selector CSS pentru asta. Există și un :invalid selector. Introduceți numele dvs. în această demonstrație:
Veți observa că este evident că stilurile nevalide apar chiar înainte de a fi atins intrarea.
S-ar putea să vă gândiți să faceți ceva de genul : Nevalid: nu (: gol) dar nu va funcționa deoarece browserele sunt proaste și întotdeauna consideră că elementele de formă sunt goale.
Am putea face niște șmecheri cu noul : Substituent nefigurat pseudo-selector, după cum se arată în demo-ul următor, dar suportul browserului pentru : Substituent nefigurat este oribil și nu există încă un polifil modern. Păcat.
Pentru moment, cel mai bun pariu este să adăugați un JavaScript pentru a comuta o clasă în funcție de dacă intrarea este goală sau nu. Iată demo-ul de lucru:
Partea mea favorită despre această abordare este că ai control complet CSS asupra fiecărui fragment al formularului tău.
Prin apăsarea butonului sub vom avea acces la selectorul de frate adiacente de pe noi .gol clasă. Apoi, putem crea un înlocuitor faux care se îndepărtează frumos din drum, de îndată ce intrarea nu mai este goală. Iată un exemplu:
În cazul în care fiind sub vă ofensează sensibilitățile sau nu este suficient de accesibil, puteți oricând să tweak JavaScript pentru a adăuga gol clasa la in schimb. Apoi este doar o chestiune de tweaking CSS un pic. Iată un exemplu care o face așa:
Clasele de validare funcționează și pe astfel încât să puteți merge într-adevăr nuci cu stil de control.
Nu există nicio limită pentru ceea ce puteți face cu această abordare. Unele idei:
Nu există niciun mod de a modela mesajele de validare. Navigatorii au dezactivat capacitatea de a modela aceste. Nu cred neapărat că este un lucru rău, deoarece oamenii vor fi obișnuiți cu aceste stiluri de validare. De fapt, probabil de aceea browserele au decis să-și axeze accesul la ele. Acum ele sunt standardizate.
Ele sunt, de asemenea, în afara fluxului de pagină, astfel încât să nu trebuie să vă faceți griji despre ele împingând elemente de formă în jurul cu aspectul lor.
Dacă aveți absolut nevoie de control complet asupra stilurilor de validare, este posibil ca această metodă să nu fie pentru dvs..
Sunt incantat sa primesc cateva sugestii si sa-mi place sa vad cateva stiluri / tehnici de validare!
Poziția blogului "Adaptive Placeholders" de la Danny King ma făcut să mă gândesc la asta.
Accentsconagua