Hướng dẫn toàn diện về Xác thực Bootstrap cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng tìm hiểu về xác thực Bootstrap. Là người thầy thân thiện trong lĩnh vực máy tính, tôi rất vui được hướng dẫn các bạn trong hành trình này. Đừng lo nếu bạn mới bắt đầu học lập trình - chúng ta sẽ bắt đầu từ những điều cơ bản và dần nâng cao. Cuối bài hướng dẫn này, bạn sẽ có thể xác thực các biểu mẫu như một chuyên gia!

Xác thực Bootstrap là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu qua về xác thực Bootstrap là gì. Hãy tưởng tượng bạn đang điền một biểu mẫu trực tuyến và vô tình để trống một trường bắt buộc. Đột nhiên, biểu mẫu sẽ đánh dấu trường đó bằng màu đỏ và yêu cầu bạn điền đầy đủ. Đó chính là xác thực biểu mẫu! Bootstrap, bộ công cụ front-end đáng tin cậy của chúng ta, cung cấp các tính năng xác thực内置 để làm cho quá trình này mượt mà và thân thiện với người dùng.

Tùy chỉnh Styles

Hãy bắt đầu với việc tùy chỉnh styles cho quá trình xác thực biểu mẫu của chúng ta. Bootstrap cho phép chúng ta thêm phong cách riêng vào quá trình xác thực. Dưới đây là một ví dụ đơn giản:

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">Tên người dùng</label>
<input type="text" class="form-control" id="username" required>
<div class="invalid-feedback">
Vui lòng chọn một tên người dùng.
</div>
</div>
<button class="btn btn-primary" type="submit">Gửi biểu mẫu</button>
</form>

Trong ví dụ này, chúng ta đã thêm lớp needs-validation vào biểu mẫu và đặt novalidate để ngăn chặn xác thực mặc định của trình duyệt. Thuộc tính required trên trường nhập liệu cho biết Bootstrap rằng trường này bắt buộc phải điền.

Bây giờ, hãy thêm một chút JavaScript để nó hoạt động:

(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);
})();

Mã JavaScript này thêm các bộ监听器 vào biểu mẫu của chúng ta, kiểm tra tính hợp lệ khi biểu mẫu được gửi. Nếu biểu mẫu không hợp lệ, nó ngăn chặn việc gửi và thêm lớp was-validated, kích hoạt các style tùy chỉnh của chúng ta.

Sử dụng默认 Styles của Trình duyệt

Đôi khi, bạn có thể muốn sử dụng các style xác thực mặc định của trình duyệt. Điều này giống như để trình duyệt làm phần công việc nặng cho bạn! Dưới đây là cách bạn có thể làm điều đó:

<form>
<div class="form-group">
<label for="email">Địa chỉ email</label>
<input type="email" class="form-control" id="email" required>
</div>
<button class="btn btn-primary" type="submit">Gửi</button>
</form>

Trong trường hợp này, chúng ta đã loại bỏ lớp needs-validation và thuộc tính novalidate. Trình duyệt sẽ xử lý xác thực bằng cách sử dụng các style mặc định.

Xác thực Server-Side

Mặc dù xác thực client-side rất tốt cho trải nghiệm người dùng,但我们还应始终实现服务器端验证以确保安全。 Dưới đây là một ví dụ đơn giản bằng PHP:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$email = test_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Định dạng email không hợp lệ";
}
}

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

Mã PHP này kiểm tra xem email được gửi có hợp lệ hay không. Luôn nhớ: đừng tin vào dữ liệu người dùng!

Các Element được Hỗ trợ

Xác thực Bootstrap hỗ trợ nhiều loại element khác nhau. Hãy xem xét một vài ví dụ:

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">Tên người dùng</label>
<input type="text" class="form-control" id="username" required>
</div>
<div class="form-group">
<label for="password">Mật khẩu</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="form-group">
<label for="country">Quốc gia</label>
<select class="form-control" id="country" required>
<option value="">Chọn...</option>
<option>USA</option>
<option>UK</option>
<option>Canada</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">
Đồng ý với điều khoản và điều kiện
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Gửi biểu mẫu</button>
</form>

Biểu mẫu này bao gồm text input, password input, select dropdown và checkbox - tất cả đều được hỗ trợ bởi xác thực Bootstrap.

Tooltips

Muốn thêm một chút sự tinh tế cho các thông báo xác thực? Hãy thử tooltips! Dưới đây là cách làm:

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">Tên người dùng</label>
<input type="text" class="form-control" id="username" required>
<div class="invalid-tooltip">
Vui lòng chọn một tên người dùng duy nhất.
</div>
</div>
<button class="btn btn-primary" type="submit">Gửi biểu mẫu</button>
</form>

Chúng ta đã thay thế invalid-feedback bằng invalid-tooltip. Bây giờ thay vì thấy văn bản dưới trường nhập liệu, bạn sẽ thấy một tooltip tinh tế!

Các Phương thức Xác thực

Dưới đây là bảng các phương thức xác thực phổ biến bạn có thể sử dụng:

Phương thức	Mô tả
required	Trường không thể để trống
minlength	Độ dài tối thiểu của ký tự
maxlength	Độ dài tối đa của ký tự
min	Giá trị tối thiểu cho các input số
max	Giá trị tối đa cho các input số
type="email"	Phải là địa chỉ email hợp lệ
pattern	Phải khớp với một mẫu cụ thể

Nhớ rằng bạn có thể kết hợp các phương thức này để tạo ra các quy tắc xác thực phức tạp hơn!

Và thế là xong, các bạn! Chúng ta đã bao quát các основы xác thực Bootstrap, từ style tùy chỉnh đến tooltips. Nhớ rằng, thực hành là cách tốt nhất để trở thành chuyên gia, vì vậy đừng ngần ngại thử nghiệm với các khái niệm này. Chúc các bạn may mắn và các biểu mẫu của bạn luôn được xác thực!

Credits: Image by storyset