Formulärvalidering

Den här artikeln förklarar formulärvalidering.

Det förklarar formulärvalidering i HTML.

YouTube Video

HTML Formulärvalidering

Översikt av HTML Formulärvalidering

• HTML-formulärvalidering är en mekanism för att säkerställa att data uppfyller vissa villkor innan en användare skickar in det. Detta minskar serverfel och förbättrar användarupplevelsen.

required Attribut

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" required placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• Attributet required anger att inmatningsfält måste fyllas i innan formuläret skickas.

pattern Attribut

1<form>
2  <label for="username">Username (letters and numbers only):</label>
3  <input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" required>
4  <button type="submit">Submit</button>
5</form>

• Attributet pattern används för att validera om formulärinmatningen matchar ett specifikt regex-mönster. Till exempel kontrollerar detta om användarnamnet endast innehåller alfanumeriska tecken.

min och max Attribut

1<form>
2    <label for="age">Age:</label>
3    <input type="number" id="age" name="age" min="18" max="99" placeholder="Enter your age">
4    <button type="submit">Submit</button>
5</form>

• <min> och <max>-attribut används för att specificera de lägsta och högsta tillåtna värdena för ett inmatningselement. De används oftast med inmatningstyper som number, range och date.
• I detta exempel kan du ange ett nummer mellan 18 och 99.

minlength och maxlength Attribut

1<form>
2    <label for="username">Username:</label>
3    <input type="text" id="username" name="username" minlength="4" maxlength="12" placeholder="4-12 characters">
4    <button type="submit">Submit</button>
5</form>

• Attributet minlength specificerar det minsta antalet tecken som krävs för ett inmatningsfält, medan attributet maxlength definierar det högsta antalet tillåtna tecken.
• I det här exemplet kan du mata in text mellan 4 och 12 tecken.

Attributet type="email"

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• Attributet type="email" används för att säkerställa att inmatningen är i ett giltigt e-postadressformat. Det här attributet tillhandahåller inbyggd valideringsfunktionalitet för fält för e-postadressinmatning.

Attributet type="url"

1<form>
2    <label for="website">Website:</label>
3    <input type="url" id="website" name="website" placeholder="https://example.com" required>
4    <button type="submit">Submit</button>
5</form>

• <input type="url"> tillhandahåller ett inmatningsfält som kräver ett korrekt URL-format. Webbläsaren kontrollerar automatiskt om inmatningen är giltig som en URL.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video