Автор оригинала: FreeCodeCamp Community Member.
В прошлом проверка формы будет происходить на сервере, после того, как человек уже введен во всей их информации и нажал кнопку отправки.
Если информация была неверной или отсутствует, сервер должен будет отправить все обратно с сообщением, сообщив человеку, чтобы исправить форму, прежде чем отправлять его снова.
Это был длительный процесс и положил бы много нагрузки на сервер.
В наши дни JavaScript предоставляет ряд способов проверки данных формы прямо в браузере, прежде чем отправлять его на сервер.
Вот код HTML, который мы будем использовать в следующих примерах:
Form Validation
Основная проверка
Этот тип проверки включает в себя проверку всех обязательных полей и убедившись, что они правильно заполнены.
Вот основной пример функции проверить Это отображает предупреждение, если имя пользователя и адрес электронной почты пустые, в противном случае возвращается:
const submitBtn = document.getElementById('submit-btn');
const validate = (e) => {
e.preventDefault();
const username = document.getElementById('username');
const emailAddress = document.getElementById('email-address');
if (username.value === "") {
alert("Please enter your username.");
username.focus();
return false;
}
if (emailAddress.value === "") {
alert("Please enter your email address.");
emailAddress.focus();
return false;
}
return true;
}
submitBtn.addEventListener('click', validate);
Но что, если кто-то входит в случайном тексте как свой адрес электронной почты? В настоящее время проверить Функция все равно вернется правдой. Как вы можете себе представить, отправка плохих данных на сервер может привести к проблемам.
Вот где приходит проверка формата данных.
Валидация формата данных
Этот тип проверки на самом деле смотрит на значения в форме и проверяет, что они верны.
Проверка адресов электронной почты общеизвестно сложно – есть огромное количество законных адресов электронной почты и хосты, и невозможно угадать все действующие комбинации символов.
Тем не менее, есть несколько ключевых факторов, которые распространены во всех действительных адресах электронной почты:
- Адрес должен содержать один @ и хотя бы одну точку (.)
- Персонаж @ не может быть первым символом в адресе
- . должен прийти хотя бы один символ после @ символа @
Имея в виду, возможно, разработчики используют Regex, чтобы определить, действует ли адрес электронной почты или нет. Вот функция, которую Тайлер Макгиннис рекомендует его блог :
const emailIsValid = email => {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
emailIsValid('free@code@camp.org') // false
emailIsValid('quincy@freecodecamp.org') // trueДобавлено в код из последнего примера, он будет выглядеть так:
const submitBtn = document.getElementById('submit-btn');
const validate = (e) => {
e.preventDefault();
const username = document.getElementById('username');
const emailAddress = document.getElementById('email-address');
if (username.value === "") {
alert("Please enter your username.");
username.focus();
return false;
}
if (emailAddress.value === "") {
alert("Please enter your email address.");
emailAddress.focus();
return false;
}
if (!emailIsValid(emailAddress.value)) {
alert("Please enter a valid email address.");
emailAddress.focus();
return false;
}
return true; // Can submit the form data to the server
}
const emailIsValid = email => {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
submitBtn.addEventListener('click', validate);
HTML5 формы ограничения
Некоторые из обычно используются ограничения HTML5 для являются Тип атрибут (например, тип = "пароль" ), Maxlength , Требуется и отключено Отказ
Менее обычно используемое ограничение – шаблон атрибут, который принимает регулярное выражение JavaScript.