Inleiding tot Bootstrap-formuliervalidatie
Validatie wordt gebruikt om Acceptatie te vormen met enkele regels en voorschriften. Bootstrap heeft veel klassen om een formulier te bouwen. Maar validatie vereist controlegegevens over formulier. In dit onderwerp gaan we meer te weten over de soorten Bootstrap-formuliervalidatie.
Het formulier heeft bijvoorbeeld een wachtwoord. Wachtwoord heeft veel regels volgens de vereisten. Iemand heeft letters nodig, velen hebben numeriek nodig, anders heeft iemand speciale tekens nodig. De gebruiker kent de vervulling van de vereiste, validatie is belangrijk.
Soms krijgt de gebruiker niet de exacte vormvereiste of de vereiste hoeveelheid om te voldoen, die tijdvalidatie is nuttig om gegevens correct in te dienen. Als u niet aan de specificatie voldoet, krijgt u automatisch de feedback in het formulier.
Hoe formulieren valideren met Bootstrap?
- Het bootstrap-formulier zorgt ervoor dat validatie alle complicaties van JavaScript-codering overwint en gemakkelijk met klassen werkt.
- Drie bootstrap-formuliervalidatie wordt geleverd met wat glyphicon om het bericht van fout, waarschuwing en succes te krijgen. Validatieklassen worden altijd in de bovenliggende klasse geplaatst.
- Naast validatieklassen is ook de klasse has-feedback vereist om het pictogram op de juiste plaats in het formulierinvoervak te krijgen, samen met het label. Deze klasse is geplaatst in de bovenliggende klasse.
Voorbeeld:
De vorm-controle-feedbackklasse was ook nodig met het glyphicon-pictogram om een pictogram in het vak van het invoerformulier in te stellen.
Voorbeeld:
Soorten Bootstrap-formulierenvalidatie
Er zijn 3 soorten Bootstrap-formulieren zoals hieronder vermeld:
1. heeft succes
Deze klas kreeg vroeger de boodschap van succes. Met deze validatieklasse hebben gebruikers ook het pictogram "glyphicon glyphicon-ok" nodig om het pictogram van succes te tonen. Als de gebruiker de invoer in het formulier correct invoert, werkte deze validatie.
De klasse succes heeft een ouderklasse. Om het succesbericht te krijgen, wordt deze validatie gebruikt. Het onderstaande voorbeeld geeft de horizontale vormindeling. Uitvoer wordt geleverd met het bericht in de groene kleur.
Syntaxis:
.
Voorbeeld:
Paasword
Output:
2. heeft waarschuwing
Deze klasse wordt gebruikt voor waarschuwingsberichten voor formulierinvoer. Bij deze validatieklasse hebben gebruikers ook een pictogram "glyphicon glyphicon-waarschuwingsbord" nodig om het waarschuwingspictogram weer te geven. Als we de verkeerde invoer in het formulier invoeren, hebben we nog een kans om invoer in te voeren die validatie van de tijdwaarschuwing heeft gewerkt.
Waarschuwing validatie klasse geplaatst in bovenliggende klasse met een has-feedback klasse. Als de gebruiker een waarschuwing krijgt voor een fout, werkte deze klasse. Het resultaat komt met het bericht in gele kleur.
Syntaxis:
.
Voorbeeld:
Paasword
Output:
3. heeft een fout
Deze klasse wordt gebruikt voor foutmelding van formulierinvoer. Met deze validatieklasse hebben gebruikers ook het pictogram "glyphicon glyphicon-remove" nodig om het pictogram van de fout weer te geven. Als we de verkeerde invoer in het formulier invoeren, werkte deze validatie.
Foutvalidatieklasse geplaatst in bovenliggende klasse met een has-feedbackklasse. Als de gebruiker de foutmelding fout krijgt, werkte deze klasse.
Syntaxis:
Voorbeeld:
Paasword
Output:
Beschrijving: Alle vormen hebben een horizontale indeling. Het label heeft 2 kolommen en invoer heeft 10 kolommen. Validatieklasse ingesteld met has-feedback in bovenliggende div. Om te zien dat de gebruiker van het pictogram glyphicon-pictogrammen gebruikt met formulier-controle-feedback in de
Gebruikers werken met het wachtwoord. of wachtwoord is correct dan succes validatie werk of wachtwoord is fout dan fout validatie werk. Als het wachtwoord een fout bevat en we de correctie kunnen corrigeren, werken de waarschuwingsvalidatie.
Voorbeelden van validatie van Bootstrap-formulieren
Hieronder staan de verschillende voorbeelden van validatie van bootstrap-formulieren:
Voorbeeld 1
Het volgende voorbeeld is Validatie met de horizontale vorm. Glyphicon-teken is werk op het binnenste invoervak in het formulier. Label en invoer in één horizontale lijn, maar alle formuliergroepsklassen worden verticaal geplaatst.
Success
Warning
Error
Output:
Voorbeeld 2
Het volgende voorbeeld is Validatie met de verticale vorm. In de verticale vorm bevinden alle labels en ingangen zich verticaal. Glyphicon kan in de regel van het label aan het einde van het invoervak worden geplaatst.
Er is geen klasse in de vorm. Het wordt zelden gebruikt voor formuliervalidatie in bootstrap.
Success
Warning
Error
Output:
Voorbeeld 3
Het volgende voorbeeld is Validatie met het inline-formulier. Het inline-formulier heeft alle labels en invoer op één regel inclusief alle formuliergroepen. Dit is een ingewikkeld maar validatiepictogram dat in het invoervak van het formulier wordt geplaatst.
Als gebruikers alleen een klein formulier en een inlogformulier nodig hebben, dan kan het inline-formulier met validaties worden toegepast.
Success
Warning
Error
Output:
Bovenal heeft voorbeeld alle validatietypes met alle lay-outs en hoe het werkt. Als per gebruiker vereiste en gemak kies het formaat van formuliervalidatie en lay-out.
Conclusie
Meestal vindt formuliervalidatie plaats aan de serverzijde om gegevens in een database te beheren. Voor die doeleinden krijgen we veel gecompliceerde codering en het gebruik van de validatiemethode met behulp van JavaScript-taal.
Bootstrap deed alles op één formulierpagina om complicaties en langdurige codering te voorkomen en de formuliergegevens moeiteloos te beheren.
Aanbevolen artikelen
Dit is een gids voor Bootstrap-formuliervalidatie. Hier bespreken we de 3 soorten Bootstrap-formulierenvalidatie samen met de juiste voorbeelden. U kunt ook het volgende artikel bekijken.
- Bootstrap-indeling
- Bootstrap-componenten
- Wat is Bootstrap?
- Bootstrap-opdrachten
- Bootstrap-formulierindeling met voorbeelden
- Formulieren in JavaScript | Programma voor de formuliervalidatie