Bootstrap - Валидация: Полное руководство для начинающих

Здравствуйте,野心勃勃ые веб-разработчики! Сегодня мы погрузимся в мир валидации Bootstrap. Как ваш доброжелательный соседский учитель компьютера, я рад помочь вам в этом путешествии. Не волнуйтесь, если вы новички в программировании - мы начнем с основ и будем продвигаться вверх. К концу этого руководства вы будете проверять формы как профи!

Что такое валидация Bootstrap?

Прежде чем мы углубимся в детали, давайте поймем, что такое валидация Bootstrap. Представьте, что вы заполняете форму в Интернете и случайно оставляете пустым обязательное поле. Внезапно форма подчеркивает это поле красным,indicating вам заполнить его. Это и есть действие проверки формы! Bootstrap, наш надежный фронтенд-инструментарий, предоставляет нам встроенные функции валидации, чтобы сделать этот процесс гладким и удобным для пользователя.

Пользовательские стили

Давайте начнем с пользовательских стилей для нашей проверки формы. Bootstrap позволяет нам добавить свою изюминку в процесс валидации. Вот простой пример:

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">Имя пользователя</label>
<input type="text" class="form-control" id="username" required>
<div class="invalid-feedback">
Пожалуйста, выберите имя пользователя.
</div>
</div>
<button class="btn btn-primary" type="submit">Отправить форму</button>
</form>

В этом примере мы добавили класс needs-validation к нашей форме и установили novalidate, чтобы предотвратить стандартную проверку браузера. Атрибут required в поле ввода tells Bootstrap, что это поле должно быть заполнено.

Теперь добавим немного JavaScript, чтобы это работало:

(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();

Этот код JavaScript добавляет обработчики событий к нашей форме, проверяя Validity при отправке формы. Если форма недействительна, он предотвращает отправку и добавляет класс was-validated, который активирует наши пользовательские стили.

Стандартные стили браузера

Иногда вы можете захотеть использовать стандартные стили проверки браузера. Это как позволить браузеру сделать за вас тяжелую работу! Вот как это сделать:

<form>
<div class="form-group">
<label for="email">Электронная почта</label>
<input type="email" class="form-control" id="email" required>
</div>
<button class="btn btn-primary" type="submit">Отправить</button>
</form>

В этом случае мы удалили класс needs-validation и атрибут novalidate. БROWSER БУДЕТ ОБРАБАТЫВАТЬ ВАЛИДАЦИЮ, используя свои стандартные стили.

Проверка на серверной стороне

Хотя проверка на стороне клиента отлична для пользовательского опыта, мы всегда должны реализовывать проверку на серверной стороне для безопасности. Вот простой пример на PHP:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$email = test_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Некорректный формат электронной почты";
}
}

function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>

Этот код PHP проверяет, является ли отправленный адрес электронной почты Valid. Всегда помните: не доверяйте вводу пользователя!

Поддерживаемые элементы

Проверка валидации Bootstrap поддерживает различные элементы формы. Давайте посмотрим на несколько:

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">Имя пользователя</label>
<input type="text" class="form-control" id="username" required>
</div>
<div class="form-group">
<label for="password">Пароль</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="form-group">
<label for="country">Страна</label>
<select class="form-control" id="country" required>
<option value="">Выберите...</option>
<option>США</option>
<option>Великобритания</option>
<option>Канада</option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="terms" required>
<label class="form-check-label" for="terms">
Соглашаюсь с условиями
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Отправить форму</button>
</form>

Эта форма включает текстовый ввод, ввод пароля, выпадающий список и флажок - все поддерживается проверкой валидации Bootstrap.

Подсказки

Хотите добавить немного extra пышности вашим сообщениям проверки? Попробуйте подсказки! Вот как:

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">Имя пользователя</label>
<input type="text" class="form-control" id="username" required>
<div class="invalid-tooltip">
Пожалуйста, выберите уникальное имя пользователя.
</div>
</div>
<button class="btn btn-primary" type="submit">Отправить форму</button>
</form>

Мы заменили invalid-feedback на invalid-tooltip. Теперь вместо текста под вводом вы увидите модную подсказку!

Методы проверки

Вот таблицаcommon методов проверки, которые вы можете использовать:

Метод	Описание
required	Поле не может быть пустым
minlength	Минимальная длина символов
maxlength	Максимальная длина символов
min	Минимальное значение для числовых вводов
max	Максимальное значение для числовых вводов
type="email"	Должен быть Valid адрес электронной почты
pattern	Должен соответствовать конкретному шаблону

Помните, вы можете комбинировать эти методы для более сложных правил проверки!

И вот оно,folks! Мы рассмотрели основы проверки Bootstrap, от пользовательских стилей до подсказок. Помните, практика делает мастера, так что не бойтесь экспериментировать с этими концепциями. Счастливого кодирования и пусть ваши формы всегда будут проверены!

Credits: Image by storyset