Валидация форм в JavaScript

Валидация HTML-форм может быть выполнена с помощью JavaScript.

HTML-формы обычно используются для сбора информации о пользователе, например, имя, адрес электронной почты, местоположение, возраст и т.д.

Но, возможно,某些用户可能不会输入您期望的数据。

Чтобы избежать ненужной нагрузки на ресурсы сервера, вы можете использовать JavaScript для валидации данных формы на клиенте (системе пользователя)

Веб-браузер выполняет валидацию перед отправкой ввода на веб-серверВалидация на клиенте。

После отправки ввода на сервер,Валидация на сервереВыполнение на веб-сервере.

　　<div　class="wrapper">
　　　　<h2>Создайте аккаунт</h2>
　　　　<label for="username"><b>Имя</b></label>
　　　　<input type="text" placeholder="Введите имя пользователя" name="uname" id="username" required>
　　　　<label for="useremail"><b>Email</b></label>
　　　　<input type="email" placeholder="Введите Email" name="uemail" id="useremail" required>
　　　　<label for="userpwd1"><b>Пароль</b></label>
　　　　<input type="password" placeholder="Введите пароль" name="psw" id="userpwd1" required>
　　　　<input type="password" placeholder="Подтвердите пароль" name="cpsw" id="userpwd2" required>
　　　　<p style="margin-top: 10px;">
　　　　　　　<input type="radio" name="gender" id="female" value="female" checked><label for="female">Женский</label>
　　　　　　　<input type="radio" name="gender" id="male" value="male"><label for="male">Мужской</label>
　　　　</p>
　　　　<button type="submit">Зарегистрироваться</button>
　　</div>
　　<div class="footer">
　　　　<div>Уже есть аккаунт? <a href="#">Войти</a></div>
　　</div>
</form>
<script>
function validateForm() {
　　let name = document.getElementById("username").value;
　　let email = document.getElementById("useremail").value;
　　let pswd1 = document.getElementById("userpwd1").value;
　　let pswd2 = document.getElementById("userpwd2").value;
　　
　　if (name == "") {
　　　　alert("Name must be filled out");
　　　　return false;
　　}
　　if (email == "") {
　　　　alert("Электронная почта обязательна");
　　　　return false;
　　}
　　if (pswd1 !== "" || pswd2 !== "") {
　　　　if (pswd1 !== pswd2) {
　　　　　　alert("Пароли не совпадают");
　　　　　　return false;　　　　　　
　　　　}
　　}
　　　　alert("Пароль должен быть заполнен");
　　　　return false;　　
　　}
　　return true;
}
</script>

Типичные задачи валидации включают:

• Заполнили ли пользователи все обязательные поля?

• Ввели ли пользователи данные?

В этом коде, если поле ввода (имя пользователя) пусто, эта функция покажет сообщение об ошибке и вернет false, чтобы предотвратить отправку формы:

　　function validateForm() {
　　let x = document.getElementById("uname").value;
　　if (x == "") {
　　　　alert("Имя должно быть заполнено");
　　　　return false;
　　}
　　}

Эта функция может быть вызypsана при отправке формы:

<form action="form-action.html" onsubmit="return validateForm()" method="POST">
　　<label for="uname">Имя:</label>
　　<input type="text" name="username" id="uname">
　　<input type="submit" value="Submit">
</form>

Проверка ввода чисел

JavaScript обычно используется для проверки ввода чисел.

Введите номер от 1 до 10:

Проверка ввода электронной почты

JavaScript обычно используется для проверки адреса электронной почты.

Введите действительный адрес электронной почты:

Проверка подтверждения пароля

JavaScript обычно используется для проверки подтверждения пароля.

Автоматическая валидация HTML-форм

HTML-валидация форм может быть использованаОбязательное полеАвтоматическое выполнение свойств:

<input type="text" name="demo" required>

Изменение типа ввода

Вы можете использовать javascript для переключения между <input type="password"> и <input type="text">.

Введите значение в поле пароля и затем нажмите кнопку «Показать пароль»:

Атрибуты проверки ввода HTML

HTML5 ввел следующие новые HTML-атрибуты:

Псевдоселекторы валидации CSS

CSS3 ввел следующие новые CSS-дополнения для выбора:

Внимание:Клиентская валидация не может заменить или заменить серверную валидацию. Даже если данные формы уже проверены, всегда следует проверять данные формы на сервере, так как пользователь может отключить JavaScript в своем браузере.