Phenquestions
Formuliervalidatie is het fundamentele en belangrijkste onderdeel van het webontwikkelingsproces. Formuliervalidatie wordt meestal gedaan aan de serverzijde. Formuliervalidatie helpt bij het tonen van foutmeldingen aan de gebruiker als er onnodige of verkeerde gegevens zijn verstrekt, of als een verplicht veld leeg is gelaten. Als de server een fout vindt, gooit hij die fout terug; dan tonen we de foutmelding aan de gebruiker. Maar we kunnen javascript aan de voorkant gebruiken om de formuliergegevens te valideren en fouten meteen weer te geven. In dit artikel zullen we de basisformuliervalidatie in javascript leren. Dus laten we direct naar de voorbeelden gaan en kijken hoe we dat in javascript kunnen doen.
Voorbeelden
Allereerst gaan we uit van een formulier met de naam "testForm", waarin we een invoerveld hebben met het label "Gebruikersnaam", en een invoertype verzendt in ons HTML-bestand. In de formuliertag hebben we een onsubmit-gebeurtenis gemaakt, waarin we een functie sluiten en retourneren valideerFunc().
In het scriptbestand zullen we de functiedefinitie van validFunc() schrijven, die elke keer wordt uitgevoerd wanneer de gebruiker op de verzendknop drukt. In die functie valideren we het invoerveld voor de gebruikersnaam. We veronderstellen dat we willen valideren dat het gebruikersnaamveld leeg is of niet wanneer de gebruiker op de verzendknop drukt.
Dus, om het gebruikersnaamveld te valideren. We wijzen eerst een variabele toe aan het document.testForm, gewoon om de code een schone en begrijpelijke uitstraling te geven. Vervolgens zullen we in de functiedefinitie de code voor validatie schrijven. We zullen een if-statement schrijven om het lege formulierveld te controleren. Als het gebruikersnaamveld leeg is, tonen we een waarschuwingsvenster om de fout weer te geven, richten we ons opnieuw op het gebruikersnaamveld en retourneren we false zodat het formulier niet wordt verzonden. Anders, als het de controle doorstaat en de gegevens worden gevalideerd, keren we true terug naar de functie.
var theForm = document.testformulier;// Formuliervalidatiecode
functievalidatieFunc()
als (het formulier).naam.waarde == "")
alert( "naam is leeg");
het formulier.naam.focus();
onwaar retourneren;
terugkeer (waar);
Na het schrijven van al deze code. Als we de code uitvoeren en op de verzendknop klikken zonder iets in het formulierveld te schrijven.
Zoals je kunt zien in de onderstaande schermafbeelding, wordt er een fout weergegeven in het waarschuwingsvenster.
Dit is een heel eenvoudig maar goed voorbeeld om aan de slag te gaan met het implementeren van de formuliervalidatie. Voor verdere implementatie, zoals validatie van meerdere formulieren of als u ook de tekenlengte wilt controleren.
Daarvoor veronderstellen we eerst twee formuliervelden in de formuliertag met het label “e-mail” en “wachtwoord” in ons HTML-bestand.
Voor validatie in javascript zullen we opnieuw een if-statement voor validatie van de e-mail- en wachtwoordformuliervelden in de functiedefinitie van het scriptbestand plaatsen. Stel dat we meerdere validaties op het e-mailveld willen toepassen, zoals het veld mag niet leeg zijn en de lengte mag niet minder zijn dan 10 tekens. We kunnen dus OR "||" gebruiken in de if-statement. Als een van deze fouten optreedt, wordt er een waarschuwingsvenster weergegeven met het foutbericht dat we willen weergeven, de focus op het veld van het e-mailformulier en de functie false retourneren. Evenzo, als we de tekenlengtecontrole op het wachtwoordveld willen toepassen, kunnen we dat doen.
var theForm = document.testformulier;// Formuliervalidatiecode
functievalidatieFunc()
als (het formulier).naam.waarde == "")
alert( "naam is leeg");
het formulier.naam.focus();
onwaar retourneren;
als (het formulier).e-mail.waarde == "" || het formulier.e-mail.waarde.lengte < 10)
alert("E-mail is ongepast");
het formulier.e-mail.focus();
onwaar retourneren;
als (het formulier).wachtwoord.waarde.lengte < 6)
alert( "Wachtwoord moet 6 karakters lang zijn" );
het formulier.wachtwoord.focus();
onwaar retourneren;
terugkeer (waar);
Na het schrijven van al deze code, herlaad de pagina om de code te hebben bijgewerkt. Nu laten we ofwel een leeg e-mailveld achter of schrijven we een e-mail van minder dan 10 tekens. In beide gevallen wordt de foutmelding 'E-mail is ongepast' weergegeven.
Dit is dus hoe we basisformuliervalidatie in JavaScript kunnen toepassen. We kunnen ook gegevensvalidatie aan de clientzijde toepassen met Regex of door onze eigen aangepaste functie te schrijven. Stel dat we gegevensvalidatie willen toepassen op het e-mailveld. De regex zou er zo uitzien voor het valideren van een e-mail.
als (/^[a-zA-Z0-9.!#$%&'*+/=?^_'|~-][e-mail beveiligd][a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test (het formulier).e-mail.waarde))
alert( "E-mail is ongepast");
het formulier.e-mail.focus() ;
onwaar retourneren;
Dit was slechts een eenvoudige demonstratie van gegevensvalidatie met regex. Maar de lucht is open voor jou om te vliegen.
Conclusie
Dit artikel behandelt de basisformuliervalidatie in javascript. We hebben ook geprobeerd een kijkje te nemen in de gegevensvalidatie met behulp van regex. Als je meer wilt weten over regex, hebben we een speciaal artikel over regex op linuxhint.com. Voor het leren en begrijpen van de concepten van javascript en meer nuttige inhoud zoals deze, blijf linuxhint bezoeken.com. Dank u!
