Introduktion til validering af Bootstrap Forms
Validering bruges til at danne accept med nogle regler og forskrifter. Bootstrap har mange klasser til at opbygge en form. Men validering kræver kontroldata om form. I dette emne skal vi lære om typerne af validering af Bootstrap Form.
For eksempel har formularen et kodeord. Adgangskode har mange regler i henhold til kravene. Nogen har brug for bogstaver, mange har brug for numerisk, ellers kræver nogen specialtegn. Brugeren kender opfyldelsen af kravet, validering er vigtig.
Nogle gange får brugeren ikke det nøjagtige krav til formular eller hvor meget der kræves for at opfylde, at tidsvalidering er nyttigt at indsende data korrekt. Hvis du ikke opfylder specifikationen, får du feedback i formularen automatisk.
Sådan valideres formularer med Bootstrap?
- Bootstrap-formularen gør validering overvinde alle komplikationer ved JavaScript-kodning og arbejde let med klasser.
- Tre validering af bootstrap-form leveres med noget glyphicon for at få beskeden om fejl, advarsel og succes. Valideringsklasser placeres altid i forældreklassen.
- Sammen med valideringsklasser kræver det også, at feedback-klassen skal få ikonet på det rigtige sted i formularindtastningsfeltet sammen med etiketten. Denne klasse placeres i forældreklassen.
Eksempel:
Form-kontrol-feedback-klassen var også nødvendig med glyphicon-ikonet for at indstille ikonet i feltet med inputformularen.
Eksempel:
Typer af bootstrap-formularer validering
Der er 3 typer Bootstrap Form som nævnt nedenfor:
1. har succes
Denne klasse bruges til at få budskabet om succes. Med denne valideringsklasse har brugere brug for også ”glyphicon glyphicon-ok” -ikonet for at vise succesikonet. Hvis brugeren indtaster input i formularen korrekt, fungerede denne validering.
Klassen med succes har fundet en forældreklasse. For at få succesmeddelelsen til at bruge denne anvendte validering. Nedenstående eksempel viser det vandrette form. Output leveres med meddelelsen i den grønne farve.
Syntaks:
.
Eksempel:
Paasword
Produktion:
2. har-advarsel
Denne klasse bruges til advarselsmeddelelser om formularindtastning. Med denne valideringsklasse har brugere også brug for et "glyphicon glyphicon-advarselsskilt" -ikon for at vise advarselsikonet. Hvis vi indtaster det forkerte input i formularen, har vi endnu en chance for at indtaste input, som den tidsvarslingsvalidering fungerede.
Advarselsvalideringsklasse placeret i forældreklasse med en has-feedback-klasse. Hvis brugeren får advarslen om en eller anden form for fejl, fungerede denne klasse. Resultatet kommer med beskeden i gul farve.
Syntaks:
.
Eksempel:
Paasword
Produktion:
3. har-fejl
Denne klasse bruges til fejlmeddelelse af formularindtastning. Med denne valideringsklasse har brugere også brug for "glyphicon glyphicon-remove" -ikonet for at vise fejlikonet. Hvis vi indtaster det forkerte input i formen, fungerede denne validering.
Fejlvalideringsklasse placeret i forældreklasse med en has-feedback-klasse. Hvis brugeren får fejlmeddelelsen om fejl, fungerer denne klasse.
Syntaks:
Eksempel:
Paasword
Produktion:
Beskrivelse: Alle former er et vandret layout. Etiketten har 2 kolonner, og input har 10 kolonner. Valideringsklasse med has-feedback til forældredivision. For at se ikonet brugere anvendte glyphicon ikoner med form-kontrol-feedback i
Brugere arbejder med adgangskoden. enten adgangskode er korrekt, så succes validering arbejde eller password er forkert, så fejl validering arbejde. Hvis adgangskoden har en eller anden fejl, og vi kan korrigere, fungerer advarselsvalidering.
Eksempler på validering af Bootstrap Forms
Nedenfor er de forskellige eksempler på validering af bootstrap-formularer:
Eksempel 1
Følgende eksempel er Validering med den vandrette form. Glyphicon-tegn er arbejde på den indvendige inputboks i formen. Mærk og indtast i en vandret linje, men alle formgruppeklasser er lodret placeret.
Success
Warning
Error
Produktion:
Eksempel 2
Følgende eksempel er Validering med den lodrette form. I lodret form er alle etiketter og input lodrette. Glyphicon kan placeres i linjen på etiketten i slutningen af inputboksen.
Der er ingen klasse i formen. Det bruges sjældent i formvalidering i bootstrap.
Success
Warning
Error
Produktion:
Eksempel 3
Følgende eksempel er Validering med den inline form. Inlineformularen har alle etiketter og input på en linje inklusive alle formgrupper. Dette er et kompliceret men valideringsikon, der er placeret i formularens inputboks.
Hvis brugere kun har brug for lille form og loginformular med valideringer, kan inline-formularen anvendes.
Success
Warning
Error
Produktion:
Frem for alt har alle valideringstype med alt layout og hvordan det fungerer. Pr. Brugerkrav og lethed skal du vælge formatet til formvalidering og layout.
Konklusion
Oftest opstår formvalidering på serversiden for at kontrollere formulardata i en database. Til disse formål får vi mange komplicerede kodninger og ved hjælp af valideringsmetoden ved hjælp af JavaScript-sprog.
Bootstrap gjorde alle ting på en formside og undgik komplikationer og lang kodning og kontroller formdata uden problemer.
Anbefalede artikler
Dette er en guide til Bootstrap Form Validation. Her diskuterer vi de 3 typer Bootstrap Forms Validation sammen med de passende eksempler. Du kan også se på den følgende artikel.
- Bootstrap-layout
- Bootstrap-komponenter
- Hvad er Bootstrap?
- Bootstrap-kommandoer
- Bootstrap Form Layout med eksempler
- Formularer i JavaScript | Program til validering af formularen