Xác thực đầu vào

Thuộc phần JavaScript trong thực tế trong hành trình HTML của Coddy. Bài học 5 trên 27.

Khi tạo biểu mẫu, bạn cần phản hồi ngay lập tức khi người dùng nhập liệu để họ không gửi thông tin không chính xác. Đây gọi là kiểm tra tính hợp lệ theo thời gian thực.

Trước tiên, hãy tạo một trường nhập văn bản cơ bản. Ta muốn kiểm tra xem độ dài tên người dùng có ít nhất 5 ký tự hay không.

<input type="text" id="username" placeholder="Enter username">

Bây giờ, hãy thêm bộ lắng nghe sự kiện để kiểm tra đầu vào khi người dùng nhập:

const usernameInput = document.getElementById('username');
const usernameError = document.getElementById('usernameError');

usernameInput.addEventListener('input', function() {
    // Lấy giá trị (value) hiện tại
    const value = this.value;
    
    // Kiểm tra xem giá trị có đáp ứng tiêu chí không
 	if (value.length < 5) {
        usernameInput.style.borderColor = "red";
      } else {
        usernameInput.style.borderColor = "green";
      }
});

Viền chuyển sang màu đỏ nếu tên người dùng có ít hơn 5 ký tự và chuyển sang màu xanh lá nếu hợp lệ.

Thử thách

Dễ

Chúng ta có một trang web với trường nhập email. Hiện tại, trang web chưa kiểm tra định dạng email.

Nhiệm vụ của bạn là hoàn thành dòng bên trong khối if hiện có sao cho:

Khi email có chứa "@",
Viền của trường nhập chuyển thành "2px solid rgb(0, 250, 0)".

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <title>Email Validation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form>
            <label for="email">Email:</label>
            <input type="text" id="email" placeholder="Enter your email">
        </form>
    </div>

    <script src="script.js"></script>
</body>
</html>