Code Lab BetaBUILD. RUN. DISCOVER.

Code Lab е в разработка. Постепенно добавяме нови уроци и подобрения. Прогресът може да бъде изтрит.

JAVASCRIPT FORMS / CHAPTER 05 / Учене / LESSON 06

HTML ограничения.

Около 5–10 минути

Теория. Браузърът умее да валидира сам — с атрибути: required (задължително), type="email" / "number", min и max за числа, minlength/maxlength за дължина и pattern (регулярен израз) за текст. Всички те правят полето невалидно, без да пишеш логика.

Състоянието се чете от el.validity.valid (или el.checkValidity()). Можеш да зададеш атрибутите и от JS: el.required = true; el.type = "email"; el.min = 18; el.pattern = "[A-Z]{3}[0-9]{2}".

Малки примери:

const age = document.querySelector("#age"); age.type = "number"; age.min = 18; age.max = 99;

Паттерн е напълно съвпадение: [A-Z]{3}[0-9]{2} приема "ABC12", но не "abc12" и не "ABC123".

Важно: клиентската валидация е за удобство на потребителя. Тя НЕ замества проверката на сървъра — всеки може да заобиколи браузъра.

Честа грешка: type="number" за номера, които не са числа (телефон, пощенски код); забравен required — празното поле е валидно!

Твоят урок

С JS сложи ограничения на трите полета: #email → type "email" и required; #age → type "number", min 18, max 99; #code → pattern "[A-Z]{3}[0-9]{2}" (три главни букви и две цифри). Хостът после въвежда "ana@example.com", "12" и "abc12" и проверява validity: email е валиден, age и code НЕ са. Клиентската валидация помага на потребителя, но сървърът пак проверява.

HTML (точно този фиксчър):
<form id="f"><input id="email" name="email" type="text"><input id="age" name="age" type="text"><input id="code" name="code" type="text"><button type="submit">Send</button></form>

Хостът прави това след Run (по ред):
1. setValue #email = "ana@example.com"
2. setValue #age = "12"
3. setValue #code = "abc12"

<form id="f"><input id="email" name="email" type="text"><input id="age" name="age" type="text"><input id="code" name="code" type="text"><button type="submit">Send</button></form>

Атрибутите правят браузъра валидатор: type, required, min/max, pattern.

lesson_06.jsJAVASCRIPT · PAGE

Зареждаме средата… При първо стартиране може да отнеме малко повече.

… 0/20000

STANDBY

DOM PREVIEWSTANDBY

Натисни Run — HTML се зарежда в sandbox iframe; Stop маха iframe-а (спира и безкраен цикъл).

01#email е email + required + валиден

02#age е number и невалиден (12 < 18)

03#code е невалиден (abc12 не пасва)

КонзолаНапиши кода. Включи системата.

›

Прогрес в Профила →

JAVASCRIPT LABKALKULATORI.BG

Code Lab BetaBUILD. RUN. DISCOVER.

Code Lab е в разработка. Постепенно добавяме нови уроци и подобрения. Прогресът може да бъде изтрит.

Зареждане…

JAVASCRIPT LABKALKULATORI.BG