JavaScript - Xác thực biểu mẫu: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn đang học lập trình! Hôm nay, chúng ta sẽ khám phá thế giới thú vị của xác thực biểu mẫu bằng JavaScript. Là người đã dạy lập trình trong nhiều năm, tôi có thể告诉你 rằng đây là một trong những kỹ năng thực tiễn và quan trọng nhất bạn sẽ học. Hãy bắt đầu nhé!

JavaScript - Validations

Xác thực biểu mẫu là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu xem xác thực biểu mẫu là gì và tại sao nó quan trọng. Hãy tưởng tượng bạn đang điền một biểu mẫu để đặt pizza trực tuyến. Bạn không muốn vô tình đặt 1000 chiếc pizza thay vì 1, phải không? Đó là lúc xác thực biểu mẫu phát huy tác dụng - nó kiểm tra dữ liệu do người dùng nhập vào để đảm bảo nó chính xác và ở định dạng đúng.

Xác thực biểu mẫu cơ bản

1. Kiểm tra xem trường có trống hay không

Hãy bắt đầu với xác thực cơ bản nhất - kiểm tra xem trường có trống hay không. Dưới đây là một ví dụ đơn giản:

function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}

Trong đoạn mã này:

Chúng ta lấy giá trị của trường có tên "fname" từ biểu mẫu có tên "myForm".
Nếu giá trị là trống (chuỗi trống), chúng ta hiển thị một thông báo và trả về false, ngăn không cho biểu mẫu được gửi đi.

2. Xác thực đầu vào số

Bây giờ, hãy đảm bảo rằng một trường chỉ chứa số:

function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("Input not valid");
return false;
}
}

Đây là những gì đang xảy ra:

Chúng ta lấy giá trị của trường đầu vào có ID "myNumber".
Chúng ta sử dụng isNaN() để kiểm tra xem nó có phải là số hay không.
Chúng ta cũng kiểm tra xem số có nằm trong khoảng từ 1 đến 100 hay không.
Nếu bất kỳ điều kiện nào trong số này là true, chúng ta hiển thị một thông báo và trả về false.

Xác thực định dạng dữ liệu

1. Xác thực email

Một trong những xác thực phổ biến nhất là kiểm tra xem địa chỉ email có đúng định dạng hay không. Dưới đây là cách chúng ta có thể làm điều đó:

function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("Please enter a valid email address");
return false;
}
}

Điều này có thể看起来有点吓人, nhưng hãy phân tích nó:

Chúng ta sử dụng một biểu thức chính quy (regex) để kiểm tra định dạng email.
Regex kiểm tra:
Một số ký tự không phải là khoảng trống hoặc @ ([^\s@]+)
Được theo sau bởi một ký tự @
Được theo sau bởi nhiều ký tự không phải là khoảng trống hoặc @
Được theo sau bởi một dấu chấm
Được theo sau bởi nhiều ký tự không phải là khoảng trống hoặc @

2. Xác thực ngày

Hãy xác thực một ngày để đảm bảo nó ở định dạng MM/DD/YYYY:

function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("Please enter a valid date in MM/DD/YYYY format");
return false;
}
}

Biểu thức chính quy này còn phức tạp hơn, nhưng đây là những gì nó làm:

Nó kiểm tra:
Một tháng (01-12)
Được theo sau bởi một /
Một ngày (01-31)
Một /
Một năm 4 chữ số

Lưu ý rằng, trong khi điều này kiểm tra định dạng, nó không kiểm tra xem ngày có thực tế hay không (như ngày 30 tháng 2).

Kết hợp tất cả lại

Bây giờ chúng ta đã xem xét các xác thực cá nhân, hãy kết hợp chúng thành một biểu mẫu duy nhất:

<form name="myForm" onsubmit="return validateForm()">
Name: <input type="text" name="fname"><br>
Age: <input type="text" id="myNumber"><br>
Email: <input type="text" id="myEmail"><br>
Date: <input type="text" id="myDate"><br>
<input type="submit" value="Submit">
</form>

<script>
function validateForm() {
if (!validateName() || !validateNumber() || !validateEmail() || !validateDate()) {
return false;
}
return true;
}

function validateName() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
return true;
}

function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("Age must be a number between 1 and 100");
return false;
}
return true;
}

function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("Please enter a valid email address");
return false;
}
return true;
}

function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("Please enter a valid date in MM/DD/YYYY format");
return false;
}
return true;
}
</script>

Trong ví dụ đầy đủ này:

Chúng ta có một biểu mẫu với các trường cho tên, tuổi, email và ngày.
Sự kiện onsubmit của biểu mẫu gọi hàm validateForm().
validateForm() gọi tất cả các hàm xác thực cá nhân.
Nếu bất kỳ xác thực nào thất bại, việc gửi biểu mẫu sẽ bị ngăn chặn.

Kết luận

Chúc mừng! Bạn vừa học xong các kỹ thuật cơ bản của xác thực biểu mẫu bằng JavaScript. Nhớ rằng, xác thực không chỉ là ngăn chặn lỗi - nó còn tạo ra trải nghiệm người dùng tốt hơn. Khi bạn tiếp tục hành trình lập trình của mình, bạn sẽ tìm thấy nhiều cách để cải thiện biểu mẫu và làm cho chúng trở nên thân thiện hơn với người dùng.

Dưới đây là bảng tóm tắt các phương pháp xác thực chúng ta đã覆盖:

Phương pháp	Mục đích	Ví dụ
Kiểm tra trường trống	Đảm bảo các trường bắt buộc được điền	`if (x == "")`
Xác thực số	Kiểm tra xem đầu vào có phải là số và trong khoảng	`if (isNaN(x) \|\| x < 1 \|\| x > 100)`
Xác thực email	Xác minh định dạng email	`if (!regex.test(email))`
Xác thực định dạng ngày	Kiểm tra xem ngày có đúng định dạng MM/DD/YYYY hay không	`if (!regex.test(date))`

Tiếp tục thực hành, và sớm bạn sẽ trở thành một chuyên gia xác thực biểu mẫu! Nhớ rằng, mọi lập trình viên vĩ đại đều bắt đầu từ nơi bạn đang đứng. Chúc bạn may mắn trong việc lập trình!

Credits: Image by storyset

Hướng Dẫn Trước:

JavaScript - In trang

Hướng Dẫn Tiếp Theo:

JavaScript - Hoạt hình