Valider skjema med Jquery

For å utføre denne oppgaven vil vi bruke Jquery Validation, et bibliotek slik at koden er renere, mer kompakt og utvidbar. Denne teknologien fungerer for både php- og asp.net -utviklere, siden den kjører på klientsiden og ikke på serveren.
Vi starter med å laste ned pluginet http://jqueryvalidation.org/ og også den nyeste versjonen av JQuery http://jquery.com/download/
Mellom etikettene
Pluginet jquery.validation fungerer gjennom valideringsmetoder og valideringsreglene som vi vil definere.
Valideringsmetoden er datatypen, for eksempel et numerisk tekstfelt og valideringsregler De tillater å knytte et element i skjemaet vårt, for eksempel i texbox, til en eller flere valideringsmetoder.
For eksempel definerer vi et skjema og et navn tekstboks og tilordner den en ID og den nødvendige klassen, det vil si obligatorisk.

Navn

Etter skjemaet legger vi koden som skal validere

Resultatet hvis vi prøver å sende skjemaet uten å skrive noe i navnefeltet, er en melding. Dette feltet er obligatorisk som standard på engelsk.

Vi skal legge til et e -postfelt i skjemaet og til det nødvendige attributtet vi tilordner e -post

E-post

I dette tilfellet kan vi se at e -postfeltet er validert og det står at det ikke er en gyldig e -post.
Oversette feilmeldinger
Vi har sett at jquery -validering som standard bruker engelsk språk, og vi vil se hvordan vi oversetter det til spansk. Når vi laster ned pluginet til lokaliseringskatalogen, inneholder det js -filene med meldingene oversatt til flere språk, vi trenger bare å velge det vi trenger og legge det til i det, derfor legger vi til
Vi oppdaterer nettet og endringene observeres med feilene på spansk

Språkfilen er ganske enkelt tekst som inneholder en jquery -funksjon, derfor kan vi åpne og redigere den for å tilpasse meldingene.
Hvis vi vil at et felt ikke skal valideres, legger vi ikke den nødvendige klassen på det. Denne pluginen støtter forskjellige dataformater som maksimalverdi, minimumsverdi, dato, numeriske sifre, lenkevalidering. Vi kan også lage regler som et aldersfelt der bare numeriske verdier mellom 18 og 99 år er tillatt

$ (). klar (funksjon () {

$ ("#formdatos"). validere ({

feilsøking: sant,

regler: {

alder: {

påkrevd: sant,

sifre: sant,

min: 18,

maks: 99

}

}

})

})

Denne pluginen lar oss spare mye tid i utviklingen av webapplikasjoner og unngå å gjøre feil i datafangst, for eksempel.

Reglene og metodene kan opprettes med større kompleksitet og til og med utføre utvidelser ved hjelp av jquery -funksjoner som oversettelse eller andre som vi trengerLikte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng