Introduksjon til validering av Bootstrap Forms
Validering brukes til å danne aksept for noen regler og forskrifter. Bootstrap har mange klasser for å bygge en form. Men validering krever kontrolldata om skjema. I dette emnet skal vi lære om hvilke typer Bootstrap Form Validation.
For eksempel har skjemaet et passord. Passord har mange regler i henhold til krav. Noen trenger bokstaver, mange trenger tall, ellers trenger noen spesielle tegn. Brukeren vet oppfyllelsen av kravet, validering er viktig.
Noen ganger får ikke brukeren det nøyaktige kravet til skjema eller hvor mye som kreves for å oppfylle, at validering av tid er nyttig for å sende inn data riktig. Hvis du ikke oppfyller spesifikasjonen, får du tilbakemeldingene i skjemaet automatisk.
Hvordan validere skjemaer med Bootstrap?
- Bootstrap-skjemaet gjør validering overvinne alle komplikasjoner av JavaScript-koding og fungerer enkelt med klasser.
- Tre validering av bootstrap-skjema leveres med en glyfon for å få meldingen om feil, advarsel og suksess. Valideringsklasser alltid plassert i foreldreklassen.
- Sammen med valideringsklasser krever det også at tilbakemeldingsklassen skal få ikonet på riktig sted i skjemaets innmatingsboks sammen med etiketten. Denne klassen plasseres i foreldreklassen.
Eksempel:
Form-kontroll-tilbakemeldingsklasse var også nødvendig med glyfonikonet for å sette ikonet i boksen til inndataformularet.
Eksempel:
Validering av typer bootstrap-skjemaer
Det er tre typer Bootstrap Form som nevnt nedenfor:
1. har-suksess
Denne klassen pleide å få meldingen om suksess. Med denne valideringsklassen trenger brukere også "glyphicon glyphicon-ok" -ikonet for å vise suksessikonet. Hvis brukeren legger inn innspillet i skjemaet riktig, fungerte denne valideringen.
Klassen som har suksess kommer opp med en foreldreklasse. For å få suksessmeldingen til å bruke denne valideringen brukt. Eksemplet nedenfor gir det horisontale skjemaformatet. Output kommer med meldingen i grønn farge.
syntaks:
.
Eksempel:
Paasword
Produksjon:
2. har-advarsel
Denne klassen brukes til advarsler om skjemainnføring. Med denne valideringsklassen trenger brukere også et "glyphicon glyphicon-advarselstegn" -ikon for å vise advarselsikonet. Hvis vi legger inn feil input i skjemaet, har vi en sjanse til å legge inn innspill som tidsvarslingsvalidering fungerte.
Advarselvalideringsklasse plassert i foreldreklasse med en tilbakemeldingsklasse. Hvis brukeren får advarsel om en slags feil, fungerte denne klassen. Utfallet kommer med meldingen i gul farge.
syntaks:
.
Eksempel:
Paasword
Produksjon:
3. har-feil
Denne klassen brukes til feilmelding av skjemainndata. Med denne valideringsklassen trenger brukere også "glyphicon glyphicon-remove" -ikonet for å vise feilikonet. Hvis vi legger inn feil input i skjemaet, fungerte denne valideringen.
Feilvalideringsklasse plassert i foreldreklasse med en tilbakemeldingsklasse. Hvis brukeren får feilmeldingen om feil, fungerte denne klassen.
syntaks:
Eksempel:
Paasword
Produksjon:
Beskrivelse: All form er en horisontal utforming. Etiketten har 2 kolonner og inndata har 10 kolonner. Valideringsklasse med tilbakemeldinger til foreldre div. For å se ikonet brukeren brukte glyfonikoner med skjema-kontroll-tilbakemelding i
Brukere jobber med passordet. enten passordet er riktig så suksessvalideringsarbeidet eller passordet er galt, da feilvalideringsarbeidet. Hvis passordet har en viss feil og vi ikke kan korrigere, fungerer valideringsvarsel.
Eksempler på validering av Bootstrap Forms
Nedenfor er de forskjellige eksemplene på validering av bootstrap-skjemaer:
Eksempel 1
Følgende eksempel er Validering med den horisontale formen. Glyphicon skilt er arbeid på den indre innmatingsboksen i formen. Merk og skriv inn en horisontal linje, men all formgruppeklasse er vertikalt plassert.
Success
Warning
Error
Produksjon:
Eksempel 2
Følgende eksempel er Validering med den vertikale formen. I vertikal form er alle etiketter og innganger vertikalt plassert. Glyphicon kan være plassert i linjen på etiketten på slutten av innmatingsboksen.
Det er ingen klasse i formen. Det brukes sjelden i formvalidering i bootstrap.
Success
Warning
Error
Produksjon:
Eksempel 3
Følgende eksempel er Validering med inline-skjemaet. Inline-skjemaet har alle etiketter og input på en linje inkludert alle skjemagrupper. Dette er et komplisert, men valideringsikon som er plassert i skjemaets innmatingsboks.
Hvis brukere bare trenger lite skjema og påloggingsskjema, så med valideringer, kan inline-skjemaet gjelde.
Success
Warning
Error
Produksjon:
Over alt eksempel har all valideringstype med all layout og hvordan den fungerer. Per brukerkrav og enkelhet velger du formatet for formvalidering og layout.
Konklusjon
Stort sett skjemavalidering skjer på serversiden for å kontrollere skjemadata i en database. For disse formålene får vi mange kompliserte kodinger og bruker valideringsmetoden ved å bruke JavaScript-språk.
Bootstrap gjorde alle ting på en formside og unngikk komplikasjoner og lang koding og kontroller skjemadataene uten problemer.
Anbefalte artikler
Dette er en guide til Bootstrap Form Validation. Her diskuterer vi de tre typene validering av Bootstrap Forms sammen med passende eksempler. Du kan også se på den følgende artikkelen.
- Oppstart av oppstart
- Bootstrap-komponenter
- Hva er Bootstrap?
- Bootstrap-kommandoer
- Bootstrap Form Layout med eksempler
- Skjemaer i JavaScript | Program for validering av skjema