Meniul
AcasăInternet

Validare simplă de formular fără JS. Scriem un script pentru validarea formularelor personalizate folosind jQuery. Aplicarea regulilor de validare bazate pe apartenența la clasă

  • ASP,
  • JavaScript

    • Există multe articole despre cum să vă scrieți propriile reguli pentru pluginul de validare jQuery, dar puține dintre ele explică munca internă acest plugin, despre care vom discuta în acest articol.
    Aceasta este prima parte a seriei „Understanding Asp.NET MVC Unobtrusive Validation”

    1. Lucrând pluginul de validare jQuery din interior

    Ce învățăm din acest articol:
    1. Cum se validează formularul.
    2. Mesaje de validare și modul în care funcționează.
    3. Adăugarea propriilor reguli de validare.
    4. Ce se întâmplă exact când numim metoda de validare.

    Cum se validează un formular
    Există 2 modalități principale de validare a unui formular.1. Utilizați numele claselor ca reguli Cum funcționează

    Adăugăm la câmpul care trebuie validat, atribut html„clasă” și aceasta va permite validarea.
    Deci, dacă dorim ca câmpul de text să fie obligatoriu, adăugăm o valoare de atribut class = „required” elementului de intrare.

    HTML


    JavaScript
    $(document).ready(function() ( $("formular").validate(); ));
    În acest fel, puteți adăuga mai multe reguli la anumite clase.

    Avantaje și dezavantaje ale acestei abordări:
    Funcționează numai cu reguli care nu acceptă argumente.
    Folosim atributul html „class” pentru ceva pentru care nu este destinat.
    Dar este ușor de instalat.

    Folosind metoda „addClassRules”
    Utilizarea funcției „addClassRules” ne oferă posibilitatea de a folosi o regulă compusă pentru o singură clasă.

    JavaScript
    $.validator.addClassRules(( nume: ( obligatoriu: true, minlength: 2 ), zip: ( obligatoriu: true, cifre: true, minlength: 5, maxlength: 5 ) ));
    Acest cod adaugă 2 reguli noi pentru clasa „nume” și „zip”, iar dacă avem un element „input” a cărui clasă este „zip”, atunci i se aplică regulile: valoarea sa este necesară, utilizatorul poate doar introduce numerele și lungimea trebuie să fie de exact 5 caractere.

    HTML

    Informații: De utilizat propriul mesaj pentru o anumită regulă „necesită” într-o regulă compusă, trebuie să venim cu un alias pentru regula „necesară”, să creăm o nouă regulă cu acel alias și să setăm un mesaj implicit pentru aceasta.

    JavaScript
    $.validator.addMethod("newrequired", $.validator.methods.required, "numele este necesar");
    Sau putem folosi atributul html „title”, valoarea acestuia va fi mesajul de eroare pentru regula compusă.

    Notă: Validarea după numele clasei funcționează numai pentru regulile de validare care nu acceptă niciun argument.

    2. Adăugarea de reguli ca obiect JSON la metoda validate() Din nume, ar fi trebuit să ghiciți că această metodă de validare acceptă un obiect json, astfel încât să putem defini câmpurile pe care trebuie să le validăm și regulile de validare pentru ele.

    HTML

    JavaScript
    $("form").validate(( reguli: ( userEmail: ( email: adevărat, obligatoriu: adevărat ) ) ));
    Notă: Când trecem obiectul „reguli” la funcția „validare”, cheia trebuie să fie valoarea atributului „nume”, nu valoarea „id”. După cum puteți vedea în exemplu: cheia este „userEmail”, valoarea atributului este „name”, iar atributul „id” are o altă valoare.

    Avantaje și dezavantaje ale acestei abordări:

    Această abordare ne oferă posibilitatea de a folosi mai multe reguli de validare care iau argumente precum minlength, remote, equalTo etc.
    Control excelent și configurabil manual asupra tuturor lucrurilor.
    Dar utilizatorul trebuie să facă functie separata„validați” cu opțiuni diferite pentru fiecare formular.

    Adăugarea sau eliminarea regulilor dinamice. Adăugarea regulilor Pentru a adăuga o regulă trebuie să folosim metoda „reguli” pentru a elemente jQuery după validarea formularului și trecem șirul „add” ca prim parametru și ca al doilea parametru obiectul regulilor pe care dorim să le adăugăm acestui element (putem trece și obiectul „mesaj” pentru regulile pe care le avem adăugat).

    JavaScript
    $(".input").rules("adăugați", ( obligatoriu: adevărat, mesaje: ( obligatoriu: adevărat ) ))

    Eliminarea regulilor Dacă dorim să eliminăm o regulă sau un set de reguli, trecem șirul „remove” ca prim parametru la metoda „rules”, iar al doilea parametru va fi un șir care conține regulile pe care dorim să le eliminam, separate prin un spațiu.

    JavaScript
    $(".input").rules("elimină", ​​"min max");

    Abordarea configurației manuale JavaScript
    var validator = $("form").data("validator"); validator.settings.rules.objectName = (necesar: adevărat)
    Această abordare este foarte utilă, dacă aveți reguli și obiecte mesaj create, puteți extinde regulile validatorului cu propriile dvs.:

    JavaScript
    $.extend(validator.settings, ( reguli: reguli, mesaje: mesaje));

    Mesaje de validare și modul în care funcționează Există trei moduri de a configura un mesaj de validare

    1. Treceți obiectul „mesaje” la metoda „validare”. Obiectul „mesaje” este format din perechi cheie/valoare. Cheia este valoarea atributului „nume” al elementului. Valoarea este un obiect care conține fiecare regulă și mesajul acesteia.

    JavaScript
    $("form").validate(( reguli: ( userEmail: ( email: true, obligatoriu: true ) ), mesaje: ( userEmail: ( email: "Vă rugăm să introduceți adresa de e-mail", obligatorie: "*" ) ) )) ;
    2. Determinați valoarea atributului „titlu” al elementului

    HTML

    3. Utilizați mesajul implicit. Când este definită o regulă de validare, există mesaje implicite încorporate pentru regulile încorporate.

    Notă: Aceste trei metode se suprascriu reciproc în funcție de prioritate, cea mai mare prioritate fiind obiectul „mesaje” transmis, iar cea mai mică prioritate fiind mesajul implicit.

    Adăugarea regulilor de validare personalizate Când dorim să adăugăm mai multe reguli de validare decât cele definite implicit, folosim metoda
    $.validator.addMethod

    Această metodă ia ca parametri următorii:

    • numele regulii;
    • o funcție care efectuează validarea;
    • mesaj implicit.
    Funcția care efectuează validarea poate avea doi sau trei parametri

    JavaScript
    function validationMethod (valoare, element) // SAU function validationMethod (valoare, element, parametri)
    Să explic acești parametri.
    Valoare: valoarea elementului DOM care va fi validat
    Element: elementul DOM în sine
    Parametri: ceea ce transmitem ca valoare. Pentru acest exemplu, regulile de validare sunt ceea ce parametrii ar trebui să fie egal.

    JavaScript
    $("form").validate(( reguli: ( prenume: ( compara: ( tip: "notequal", otherprop: "nume" ) ) ) ));
    în acest exemplu, parametrii vor fi egali cu (type: „notequal”, otherprop: „lastname”)

    Exemplu de adăugare a propriei reguli:

    JavaScript
    $.validator.addMethod("notnumbers", function(valoare, element) ( return !/*/.test(value); ), "Vă rugăm să nu introduceți numere.")

    Ce se întâmplă exact când numim metoda „validare”.

    Când numim metoda de validare pe un formular, se întâmplă o mulțime de lucruri diferite în culise:

    Un obiect „validator” este creat cu toate regulile și opțiunile atașate formularului.
    Metoda „validate” atașează „validator” folosind „$.data”. Îl putem obține selectând formularul și apelând funcția jQuery „$.data” și pasând-o la „validator”. Obiectul „vaidator” este toate metadatele pentru validare, ceea ce ne oferă posibilitatea de a accesa opțiunile de validare în orice moment ciclu de viață pagini.
    Folosind acest obiect, putem modifica în timpul rulării opțiunile pe care le-am transmis metodei de validare, cum ar fi adăugarea sau eliminarea regulilor, schimbarea comportamentului dacă un câmp este valid sau invalid sau chiar introducerea unui selector de ignorare.

    JavaScript
    //obținerea validatorului var validator = $("selector").data("validator")
    Notă: Când apelați metoda „validate” pe un formular care este deja validat, acesta va returna doar obiectul „validator”, este folosit și $.data și toate opțiunile anterioare trecute de metoda „validate” vor fi șterse.

    JavaScript
    var validator = $(".selector").validate(/* regulile vor fi omise */)

    Atașarea evenimentelor de formular
    Ce se va întâmpla când facem clic pe trimite și va fi introdus formularul valoare incorectă pentru domeniul la care am atasat validarea. Dacă unul dintre câmpuri este invalid, atunci pluginul de validare îl va analiza mai atent pentru a verifica dacă este valid sau nu pe baza evenimentelor din acest câmp.
    Evenimentele de formular la care se abonează pluginul sunt „click”, „focusin”, „focusout”, „keyup”, „submit”.
    Notă: Puteți dezactiva validarea pentru anumite evenimente pasând-le ca chei în metoda de validare și false ca valori.

    JavaScript
    $(".selector").validate(( onfocusout: false, onkeyup: false, onclick: false, onsubmit: false ));

    Traducerea articolului lui Nadeem Khedr „Cum funcționează intern pluginul de validare jQuery”.

    Acesta este un subiect foarte neplăcut pentru orice programator. Cu cât sunt mai multe câmpuri în formular, cu atât scriptul de validare este mai mare și mai complex forme jquery. Au fost momente când programatorii au făcut validarea în PHP. O astfel de validare părea destul de greoaie. Dezavantajul acestei validări PHP este că întotdeauna trebuie să utilizați sesiuni sau cookie-uri. În acest caz, pagina este reîncărcată constant, ceea ce face solicitări inutile către baza de date.

    Validarea în jquery este mult mai ușor de făcut. Sunt câteva pluginuri jquery pentru a valida câmpurile de formular. Îți voi arăta o modalitate foarte simplă. Îl puteți modifica și adăuga propriile verificări proprietare. Figurat vorbind, erorile vor fi plasate într-o singură matrice. Această matrice se va transforma apoi într-un șir solid. Veți vedea mai multe erori în ieșire simultan.

    Lipiți următorul cod în document html. Vă rugăm să rețineți că aveți un buton și 3 câmpuri.

    formular ( margine: 10 px; chenar: 1 px gri solid; ) intrare ( margine: 5 px; chenar: 1 px gri solid; )


    // formular de validare jquery $("input").click(function ()( // colectează date într-o singură matrice var title = $("input").val().trim(); var text = $("input") ").val().trim(); var cat = $("input").val().trim(); //procesează datele var error_arr = ; if(title.length == 0) error_arr.push ( "descriere"); if(text.length == 0) error_arr.push("text"); if(cat.length == 0) error_arr.push("category"); ) .lungime > 0)( alert("Nu ați completat următoarele câmpuri:\n" + error_arr.join(", ")); // blocarea tranziției la o altă pagină returnează false; )else( console.log("Fără erori!"); ) ));

    Să ne uităm la scriptul de validare a formularului în sine. În primul rând, datele sunt colectate în variabile. Asigurați-vă că ștergeți datele din spații. „ ” este, de asemenea, un simbol. Apoi, datele sunt verificate pentru prezența caracterelor. Puteți adăuga propriile cecuri de marcă. Puteți chiar să utilizați expresii obisnuite. Totul depinde de sarcina la îndemână. Apoi există o verificare finală pentru erori. Dacă există cel puțin o eroare, alerta va afișa o eroare. Acordați atenție la join(). Această funcție colectează toate elementele unui tablou și le emite ca un șir delimitat. Citiți despre matrice pe pagina Arrays în javascript. Nu folosesc bucle sau funcția each(). E mai usor)). Dacă nu există erori, atunci scriptul vă va muta la pagina noua iar datele vor fi trimise. În cazul unei erori de validare, nu va exista tranziție la o altă pagină. Veți vedea un avertisment și o afișare a tuturor erorilor (Nu ați completat următoarele câmpuri: descriere, text, categorie).

    De la autor: Când colectați informații de la utilizatori utilizând un formular, este necesar să utilizați cel puțin un fel de validare a datelor. Dacă nu acordați atenție acest moment, atunci acest lucru poate duce la pierderea clienților, coruperea datelor din baza de date (DB) și chiar apariția unor găuri de securitate pe site-ul dvs. Din punct de vedere istoric, validarea formularelor a fost întotdeauna o durere de cap. Acest lucru este mai ușor de făcut pe partea de server, datorită cadrelor cu drepturi depline, care vor face totul pentru tine, dar pe partea clientului se termină cel mai adesea folosind JavaScript biblioteci care necesită mult efort pentru a se integra.

    Din fericire, HTML5 oferă mai multe funcții care pot rezolva majoritatea problemelor de validare a formularelor. Formularele din HTML5 au acum suport încorporat pentru validare prin utilizarea de atribute speciale și noi tipuri de elemente de intrare. Acest lucru vă oferă, de asemenea, mai mult control asupra stilului formularului prin CSS.

    Aruncați o privire la exemplul online de validare a formularelor și citiți mai departe pentru o fișă de cheat rapid despre elementele de bază ale validării formularelor în HTML5.

    Tipuri speciale Element de intrare

    HTML5 introduce mai multe tipuri noi de elemente de intrare. Ele pot fi folosite pentru a crea câmpuri de intrare care vor accepta doar anumit tip date. Iată noile tipuri care au apărut în HTML5:

    Pentru a utiliza unul dintre noile tipuri, specificați numele acestuia ca valoare a atributului tip:

    < input type = "email" / >

    Dacă browserul nu acceptă acest tip element de intrare, atunci elementul curent se va comporta ca un câmp obișnuit de introducere a textului. De asemenea, vă poate fi util să știți că anumite tipuri de câmpuri (cum ar fi „e-mail” și „tel”) au ca rezultat o deschidere dispozitive mobile tastaturi speciale Cu set limitat taste, mai degrabă decât aspectul complet QWERTY. Mai mult informatii detaliate Puteți găsi informații despre toate tipurile de elemente de intrare pe site-ul web MDN -.

    Câmpuri obligatorii

    Pur și simplu adăugarea unui atribut „necesar” la un element de intrare, selectare sau textarea va spune browserului că are a acestui domeniu trebuie să existe un sens. Gândiți-vă la asta ca la asteriscul roșu* pe care îl vedem pe majoritatea formularelor de înregistrare.

    < input type = "checkbox" name = "terms" required >

    Problema aici este că aproape orice informație va satisface această cerință, adică, de exemplu, puteți trece validarea pur și simplu punând un spațiu (vă vom arăta cum să evitați acest lucru).

    Când specificați atributul obligatoriu în câmpuri precum e-mail sau url, browserul se așteaptă să existe un anumit model în funcție de care să poată valida informațiile, dar această validare este foarte indulgentă și ratează. adrese de email cum ar fi „z@zz” (citiți mai departe pentru a afla cum să faceți acest lucru).

    Limite

    Putem instala restricții de bază, ca lungime maxima sau valori minime și maxime pentru câmpurile numerice. Pentru a limita lungimea elementelor de intrare sau textarea, utilizați atributul „maxlength”. Acest lucru se face astfel încât, în general, este imposibil să introduceți un șir mai lung decât valoarea atributului „maxlength”. Dacă încercați să introduceți o linie care depășește limita, formularul o va tăia pur și simplu.

    Decor

    Pseudoclasele CSS3 ne permit să stilăm orice câmp de formular în funcție de starea acestuia. Iată pseudo-clasele:

    Înseamnă că câmpuri obligatorii Al tău poate arăta într-un fel, cei opționali pot arăta diferit etc. În demonstrația noastră, am combinat selectoarele „valid” și „invalid” cu pseudoclasa „focus” pentru a colora câmpurile de formular în roșu și culori verzi, când utilizatorul le selectează și începe să introducă ceva în ele.

    input:focus:invalid, textarea:focus:invalid(border:solid 2px #F5192F; ) input:focus:valid, textarea:focus:valid(border:solid 2px #18E109; background-color:#fff; )

    intrare: focus: invalid,

    textarea : focus : invalid (

    chenar: solid 2px #F5192F;

    intrare: focus: valid,

    textarea : focus : valid (

    chenar : solid 2px #18E109;

    fundal - culoare : #fff;
    Sfaturi instrumente

    Probabil ați observat că atunci când încercați să trimiteți un formular completat incorect, apar indicații. Setând atributul „titlu” în câmpurile noastre, putem adăuga indicii suplimentare despre valorile pe care regulile noastre de validare se așteaptă să le furnizeze utilizatorul.

    Te rog noteaza asta browsere diferite afișați în mod diferit sfaturile instrumente. ÎN browser Chrome sens atributul titlului va apărea sub textul principal al mesajului de eroare și va avea dimensiune mai mică font decât textul de eroare. browser Firefox nu va afișa deloc textul dumneavoastră pentru sfatul explicativ decât dacă utilizați atributul „model”, care va fi folosit pentru informațiile despre model.

    Un exemplu de ceea ce putem realiza poate fi văzut în exemplul de mai jos. Exemplul include, de asemenea, validarea pentru introducerea corectă a e-mailului. Mai jos voi arăta două opțiuni pentru scripturi cu și fără validare prin e-mail.

    După cum puteți vedea, până la completarea tuturor câmpurilor, scriptul nu vă va permite să trimiteți formularul, iar adresa corectă trebuie introdusă în câmpul de e-mail. În primul rând, vă voi arăta cum să o faceți verificare simplă pentru a completa câmpurile fără verificări prin e-mail. Ce se întâmplă dacă formularul dvs. nu are acest câmp și trebuie să verificați doar câmpul de text, astfel încât să nu fie gol și notificările goale să nu vină pe e-mailul dvs.

    Pentru a ne implementa planul, trebuie mai întâi să creăm formularul în sine. Poate îl aveți deja, dar dacă doriți să introduceți acest material în el, va trebui să îl adaptați la forma dvs. Voi arăta totul folosind propriul meu exemplu. Formularul meu nu va trimite nimic, acest articol nu are un handler pentru trimiterea scrisorilor, pentru a nu complica materialul. Managerul de trimitere a e-mailurilor este o altă poveste. În primul rând, codul HTML al formularului în sine.

    Puteți vedea din cod că formularul nostru este format din trei câmpuri - nume, e-mail și câmp de testare. Mai sunt câteva Puncte importante, care va fi necesar în orice caz pt operatiune adecvata scenariu. Să o luăm în ordine.

    • id="file_form" - ID pentru formularul nostru. ID-ul este necesar, acesta va fi folosit și în script.
    • - blocul necesar. Acesta este un container pentru afișarea mesajelor de eroare din script. acest bloc poate fi plasat în afara formularului. Oferă-i orice stil. În exemplu, acesta este textul roșu care indică un câmp gol.
    • onclick="frmotpr();" - un eveniment care va lansa o funcție din scriptul nostru atunci când se apasă butonul. Acest eveniment a fost adăugat la butonul TRIMITE. Penultima linie din cod.
    • Toate câmpurile au, de asemenea, ID-uri și clase. De asemenea, vor fi necesare pentru scriptul nostru de validare. ID-ul câmpului de e-mail este deosebit de important pentru viitorul nostru script, care va verifica corectitudinea e-mailului introdus.

    Acum, pentru a face totul normal aspectîn formularul nostru, să adăugăm câteva stiluri CSS. Dacă le utilizați pe site-ul dvs., adăugați-le în fișierul dvs. de stiluri.

    #file_form( width:300px; background:#fff; padding:15px; margin:3px; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; box-shadow:0 0 10px rgba(0,0,0,.1); border:1px solid #36c; .in_pl( width:90%; margin-bottom:15px; padding:10px 15px; border-radius:25px; border:none; box -shadow:0 0 5px rgba(0,0,0,.2) inset:#fff ) .in_pl:focus( background:#fff; ) #sub_f( padding:5px 15px; border:none; border - radius:25px; box-shadow:0 0 2px rgba(0,0,0,.2); size:15px; color:#333; cursor: margin-bottom:10px; fundal:rgba(255,0,0,.2);)

    Aceste stiluri stabilesc parametrii pentru formularul în sine, câmpurile și butoanele. Nu voi descrie toate liniile și ceea ce face fiecare, există tutoriale CSS pentru asta. Voi enumera doar cele două cele mai importante.

    • #messenger sunt stiluri pentru același bloc cu ieșire de mesaj. Parametrul principal pentru această clasă este display:none. Adică ascundem inițial blocul.
    • .notvalid sunt stiluri pentru clasa care vor fi atribuite de scriptul nostru câmpului care nu este completat sau completat incorect. Voi menționa din nou această clasă mai jos.

    Acum că avem formă terminată sau ți-ai configurat formularul conform instrucțiunilor mele, i-ai adăugat ID-uri, ale mele sau ale tale, blocul necesarși evenimentul butonul, putem începe conectarea scriptului.

    Din moment ce scriptul nostru funcționează cu folosind jQuery, trebuie conectat biblioteca jQuery. Dacă nu a fost conectat anterior, faceți acest lucru adăugând această linie:

    Puteți citi unde și cum să adăugați corect biblioteca în articol -.

    După bibliotecă, nu înaintea ei, ci după ea, trebuie să conectăm mult așteptatul nostru script de validare a formularelor. după cum am scris mai devreme, prima opțiune ar fi să verificați mai întâi câmpul pentru completare, fără a verifica corectitudinea e-mailului introdus. Scenariul în sine are următoarea vedere: