Загрузка...

Проверка форм

Тот же чайный бланк снова здесь. Форма #slip, текстовое поле #guest, числовое #cups, кнопка #send с type="submit". #note начинается как blank.
Прочитать значение — не значит принять его. Страница по-прежнему вызывает preventDefault, чтобы браузер остался здесь, и потом решает. Имя после trim не должно быть пустым. Чашек должно быть число от 1 до 3. Иначе отказ. lida и 2 принимаются, заметка становится ok. Страница нажимает send, пока имя пустое, затем заполняет поля и нажимает снова. Строка читается need guest / ok.

Не прошлый бланк

Прошлая страница сохранила lida и строку 2 и написала lida / 2 / stayed. Она не спрашивала, можно ли такой заказ. Пустой гость тоже ушёл бы. Эта страница берёт ту же форму и ту же кнопку и отвечает на другой вопрос: этот заказ устоит?
Проверка смотрит сначала на гостя. Если имя пустое, чашки ещё не судят. Number("") равен 0 и лежит вне 1–3, но забытое имя не должно стать need cups.

Что может сказать заметка

Заметка начинается как blank. На кнопке по-прежнему send. Каждый фрагмент стартует с пустого бланка, кроме строки страницы.

📊 Что может сказать заметка

Что введено Текст заметки Легко перепутать
гость пуст, 2 чашки need guest написать need cups
гость lida, 9 чашек need cups написать ok
гость lida, 2 чашки ok старая строка lida / 2 / stayed
гость lida, 0 чашек need cups принять 0 за «чашек нет, идём дальше»
страница, два щелчка need guest / ok одно слово ok

trim убирает пробелы по краям имени. Три пробела после trim всё ещё пусты. Number превращает текст чашек в число, чтобы >= и <= сравнивали числа, а не строки. Само поле хранит текст. Преобразование только внутри проверки.
Функция возвращается, как только одно правило не прошло. Дальнейшие строки не выполняются. Поэтому пустой гость не доходит до проверки чашек.

Три слова и ничего больше

Заметка — не имя гостя и не число чашек. Только need guest, need cups или ok. Прошлая страница клала lida и 2 в заметку. Эта так не делает.

Сначала гость, потом чашки

Имя судят первым. Если оно пустое, функция пишет need guest и возвращается. Чашек может быть 2, и они всё равно не важны.

Отклонить пустого гостя

javascript 
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.elements.guest.value = "   ";
slip.elements.cups.value = "2";
check();
console.log(note.textContent);

В журнале need guest. Пробелы стали ничем, имя не считается. Чашек было 2, и их не проверяли.

Девять чашек

Свежий бланк. Гость lida. Чашек 9, это больше 3.

Отклонить девять чашек

javascript 
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.elements.guest.value = "lida";
slip.elements.cups.value = "9";
check();
console.log(note.textContent);

В журнале need cups. Имя прошло, число нет. 1 и 3 прошли бы. 0 и 4 нет.

Годный заказ

Снова свежий бланк. Гость lida и 2 чашки. Оба правила проходят, заметка становится ok.

Принять две чашки

javascript 
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
check();
console.log(note.textContent);

В журнале ok. Про то, что страница остаётся, ничего не написано. Прошлая строка lida / 2 / stayed принадлежит странице, которая только читала поля.

Строка под бланком

Скрипт в конце body. Слушатель вызывает preventDefault, затем ту же проверку. Первый щелчок — при пустом госте, эта заметка сохраняется. Потом скрипт ставит lida и 2 и снова жмёт send. Строка соединяет обе заметки.

Демо страницы — проверенный бланк

html 
<!DOCTYPE html>
<html>
<head>
<title>tea-slip — page</title>
</head>
<body>
<form id="slip">
<input id="guest" name="guest" type="text">
<input id="cups" name="cups" type="number">
<button id="send" type="submit">send</button>
</form>
<p id="note">blank</p>
<p id="line">…</p>
<script>
let slip = document.getElementById("slip");
let note = document.getElementById("note");
let seen = [];
function check() {
let guest = slip.elements.guest.value.trim();
let cups = Number(slip.elements.cups.value);
if (guest === "") {
note.textContent = "need guest";
return;
}
if (!(cups >= 1 && cups <= 3)) {
note.textContent = "need cups";
return;
}
note.textContent = "ok";
}
slip.addEventListener("submit", function (event) {
event.preventDefault();
check();
seen.push(note.textContent);
});
document.getElementById("send").click();
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
document.getElementById("send").click();
document.getElementById("line").textContent = seen.join(" / ");
</script>
</body>
</html>

Строка читается need guest / ok. Первый щелчок нашёл пустое имя. Второй нашёл lida и 2. Заметка кончается на ok. Слово blank исчезло. lida / 2 / stayed — прошлая страница.

У стойки

  1. Оставь гостя пустым, поставь 2 чашки и запусти проверку. Заметка — need guest.
  2. Поставь гостя lida и 9 чашек. Заметка — need cups.
  3. Поставь 2 чашки. Заметка — ok.
  4. Прочитай строку страницы: need guest / ok.

Промахи у стойки

На кнопке по-прежнему send. Заметка — одно из трёх слов: need guest, need cups или ok.

  • Писать ok, пока гость ещё пуст
  • Судить чашки раньше имени, и пустой гость станет need cups
  • Забыть trim, и три пробела пройдут как имя
  • Сравнивать cups.value как текст и ждать, что >= поймёт «числа»
  • Читать строку как lida / 2 / stayed
  • Остановиться после первого щелчка и пропустить ok

Оставь это

  • Пустой гость, даже из одних пробелов, пишет need guest и останавливается
  • Чашки вне 1–3 пишут need cups
  • lida с 2 пишет ok
  • Гостя проверяют раньше чашек
  • Строка страницы — need guest / ok

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
6
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 54 из 55
Javascript Урок