Valideringslogikk på klientsiden
Implementer avanserte valideringsregler på klientsiden, gi brukerne umiddelbar tilbakemelding og sørg for dataintegritet før innsending ved hjelp av egendefinert jQuery-validering.
Valideringslogikk på klientsiden er en gratis leksjon i jQuery Academy på CoddyKit. Dette er leksjon 2 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i jQuery Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i jQuery Academy inneholder totalt 3 leksjoner.
Hvorfor validere skjemaer på klientsiden
Validering av skjemaer på klientsiden kontrollerer brukerens inndata før den sendes til serveren. Dette er et viktig trinn når De bygger brukervennlige webapplikasjoner.
- Bedre brukeropplevelse: Brukerne får umiddelbar tilbakemelding om feil, slik at de kan rette opp feilene uten å vente på svar fra serveren.
- Mindre belastning på serveren: Ugyldige data oppdages tidlig, slik at serveren slipper å behandle unødvendige forespørsler.
- Raskere interaksjoner: Når siden ikke lastes inn på nytt, blir skjemaopplevelsen raskere og mer responsiv.
Mer enn grunnleggende HTML5-validering
HTML5 tilbyr grunnleggende valideringsattributter som required, type="email" og pattern. Selv om disse er nyttige, mangler de ofte fleksibiliteten som kreves for komplekse forretningsregler eller tilpassede tilbakemeldinger.
HTML5 kan for eksempel ikke enkelt kontrollere om et passord oppfyller bestemte krav til styrke (for eksempel minst 8 tegn, ett tall og ett symbol), eller om to passordfelt samsvarer. Det er her jQuery kommer inn!
Fange opp innsending av skjemaet
Det første trinnet i tilpasset validering er å hindre nettleserens standardinnsending av skjemaet. Til dette bruker vi jQuery-hendelsesbehandleren .submit() og event.preventDefault().
Da kan vi kjøre valideringslogikken først. Hvis skjemaet er gyldig, kan vi sende det inn manuelt (eller sende det via AJAX, som vi skal se på i en annen leksjon).
<!-- HTML part (imagine this exists) -->
<form id="myForm">
<input type="text" id="username" required>
<button type="submit">Submit</button>
</form>
<script>
$(document).ready(function() {
$('#myForm').submit(function(event) {
// Stop the form from submitting normally
event.preventDefault();
console.log("Form submission intercepted!");
// Here, you'd add your validation logic
});
});
</script>Strukturere en tilpasset valideringsfunksjon
Det er god praksis å kapsle inn valideringslogikken i en gjenbrukbar funksjon. Denne funksjonen kan returnere true hvis skjemaet er gyldig, og false ellers.
Deretter kan De kalle funksjonen i skjemaets submit-hendelsesbehandler for å avgjøre om innsendingen skal fortsette.
<!-- HTML part -->
<form id="loginForm">
<input type="text" id="email" placeholder="Email">
<button type="submit">Login</button>
</form>
<script>
function validateLoginForm() {
let isValid = true;
const email = $('#email').val();
if (email === '' || !email.includes('@')) {
console.log("Invalid email!");
isValid = false;
}
// More validation checks here...
return isValid;
}
$(document).ready(function() {
$('#loginForm').submit(function(event) {
event.preventDefault();
if (validateLoginForm()) {
console.log("Form is valid! Submitting...");
// $(this).off('submit').submit(); // To submit programmatically
} else {
console.log("Form has errors. Please fix.");
}
});
});
</script>Validere lengden på tekstfelt
En vanlig valideringsregel er å kontrollere minimums- eller maksimumslengden på tekstinndata. Dette kan vi enkelt gjøre ved å hente .val() fra et inndatafelt og kontrollere egenskapen .length.
La oss kreve at brukernavnet har en minimumslengde på 5 tegn.
<!-- HTML part -->
<form id="userForm">
<input type="text" id="username" placeholder="Username">
<button type="submit">Create User</button>
</form>
<script>
function validateUsernameLength() {
const username = $('#username').val();
if (username.length < 5) {
console.log("Username must be at least 5 characters long.");
return false;
}
return true;
}
$(document).ready(function() {
$('#userForm').submit(function(event) {
event.preventDefault();
if (validateUsernameLength()) {
console.log("Username is valid!");
} else {
console.log("Validation failed.");
}
});
});
</script>Gi umiddelbar tilbakemelding til brukeren
Det er ikke nok å bare logge feil i konsollen! Vi må vise tydelig og umiddelbar tilbakemelding direkte på siden. De kan legge til feilmeldinger ved siden av feltene eller fremheve ugyldige inndata.
Vi legger til et <span>-element for å vise en feilmelding når brukernavnet er for kort.
<!-- HTML part -->
<form id="userFormFeedback">
<label for="usernameFeedback">Username:</label>
<input type="text" id="usernameFeedback" placeholder="Min 5 chars">
<span id="usernameError" style="color: red;"></span>
<button type="submit">Create User</button>
</form>
<script>
$(document).ready(function() {
$('#userFormFeedback').submit(function(event) {
event.preventDefault();
const username = $('#usernameFeedback').val();
const $errorSpan = $('#usernameError');
if (username.length < 5) {
$errorSpan.text("Username too short!");
$('#usernameFeedback').css('border', '1px solid red');
} else {
$errorSpan.text("");
$('#usernameFeedback').css('border', '');
console.log("Username is valid!");
}
});
});
</script>Validere e-post med regulære uttrykk
For kompleks mønstergjenkjenning, for eksempel av e-postformater, er regulære uttrykk (regex) svært nyttige. JavaScript-metoden RegExp.test() egner seg perfekt til dette.
Et grunnleggende regex-uttrykk for e-post kan kontrollere tegn, et «@»-symbol og et domene. Husk at svært strenge regex-uttrykk for e-post kan bli unødvendig komplekse, så forsøk å finne en god balanse.
<!-- HTML part -->
<form id="emailForm">
<label for="userEmail">Email:</label>
<input type="text" id="userEmail" placeholder="your@example.com">
<span id="emailError" style="color: red;"></span>
<button type="submit">Subscribe</button>
</form>
<script>
$(document).ready(function() {
$('#emailForm').submit(function(event) {
event.preventDefault();
const email = $('#userEmail').val();
const $errorSpan = $('#emailError');
// Basic email regex: something@something.something
const emailRegex = /^[\w.-]+@[\w.-]+\.[a-zA-Z]{2,6}$/;
if (!emailRegex.test(email)) {
$errorSpan.text("Invalid email format.");
$('#userEmail').css('border', '1px solid red');
} else {
$errorSpan.text("");
$('#userEmail').css('border', '');
console.log("Email is valid!");
}
});
});
</script>Validere numeriske intervaller
Noen ganger må De sikre at et tall ligger innenfor et bestemt intervall (for eksempel en alder mellom 18 og 65 eller en mengde mellom 1 og 100). Vi kan konvertere inndataverdien til et tall og utføre enkle sammenligninger.
Husk alltid å konvertere tekstinndata til et tall med parseInt() eller parseFloat() før De utfører numeriske sammenligninger.
<!-- HTML part -->
<form id="ageForm">
<label for="userAge">Your Age:</label>
<input type="number" id="userAge" placeholder="Enter age">
<span id="ageError" style="color: red;"></span>
<button type="submit">Submit Age</button>
</form>
<script>
$(document).ready(function() {
$('#ageForm').submit(function(event) {
event.preventDefault();
const ageInput = $('#userAge').val();
const age = parseInt(ageInput, 10); // Convert to integer
const $errorSpan = $('#ageError');
if (isNaN(age) || age < 18 || age > 65) {
$errorSpan.text("Age must be between 18 and 65.");
$('#userAge').css('border', '1px solid red');
} else {
$errorSpan.text("");
$('#userAge').css('border', '');
console.log("Age is valid!");
}
});
});
</script>Kombinere flere valideringsregler
Skjemaer krever ofte flere valideringsregler for ett enkelt felt eller på tvers av flere felt. De kan kjede disse kontrollene i valideringsfunksjonen.
Et vanlig mønster er å anta at dataene er gyldige, og deretter sette isValid = false hvis en regel ikke oppfylles. Da kan De samle alle feilene før de vises til brukeren.
- Kall individuelle hjelpefunksjoner for validering.
- Lagre resultatene i et boolsk flagg.
- Vis alle relevante feilmeldinger.
Test valideringsferdighetene Deres
Tenk på et skjemafelt for en «Product Code» som må oppfylle to regler:
- Det må være nøyaktig 6 tegn langt.
- Det må bare inneholde store bokstaver og sifre (A-Z, 0-9).
Hvilket jQuery-utdrag validerer inndatafeltet «productCode» riktig og viser en feilmelding?
Oppsummering: Validering på klientsiden
I denne leksjonen har De lært å implementere robust skjemavalidering på klientsiden med jQuery. Vi har gått gjennom:
- Betydningen av validering på klientsiden for brukeropplevelse og ytelse.
- Å fange opp innsending av skjemaer med
event.preventDefault(). - Strukturering av tilpassede valideringsfunksjoner.
- Implementering av regler for tekstlengde, e-postmønstre (regex) og numeriske intervaller.
- Å gi brukerne tydelig og umiddelbar tilbakemelding.
Når De behersker disse teknikkene, kan De bygge mer interaktive skjemaer som er mindre utsatt for feil!
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 22
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Valideringslogikk på klientsiden» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien jQuery Academy, inkludert «Valideringslogikk på klientsiden», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i jQuery Academy inneholder totalt 3 leksjoner.
Hva lærer jeg i «Valideringslogikk på klientsiden»?
Implementer avanserte valideringsregler på klientsiden, gi brukerne umiddelbar tilbakemelding og sørg for dataintegritet før innsending ved hjelp av egendefinert jQuery-validering. Du øver på jQuery Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med jQuery Academy?
Ingen tidligere erfaring er nødvendig. jQuery Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 3.
Hvor lang tid tar leksjonen «Valideringslogikk på klientsiden»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne jQuery Academy-leksjonen?
Ja. Alle jQuery Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Dynamisk manipulering av skjemafelt
- Valideringslogikk på klientsiden
- AJAX-innsending av skjemaer og tilbakemelding