Cách kiểm tra xem đầu vào có trống không bằng JavaScript

bởi Zell Liew

Tuần trước, tôi đã chia sẻ cách kiểm tra xem đầu vào có trống không bằng CSS. Hôm nay, hãy nói về điều tương tự, nhưng với JavaScript.

Nó đơn giản hơn nhiều.

Đây là những gì chúng tôi đang xây dựng:

Các sự kiện để xác thực đầu vào

Nếu bạn muốn xác thực đầu vào khi người dùng nhập vào trường, bạn có thể sử dụng input biến cố.

const input = document.querySelector('input')input.addEventListener('input', evt => {  // Validate input})

Nếu bạn muốn xác thực đầu vào khi người dùng gửi biểu mẫu, bạn có thể sử dụng submit biến cố. Hãy chắc chắn rằng bạn ngăn hành vi mặc định vớipreventDefault.

Nếu bạn không ngăn hành vi mặc định, trình duyệt sẽ điều hướng người dùng đến URL được nêu trong thuộc tính hành động.

const form = document.querySelector('form')form.addEventListener('submit', evt => {  evt.preventDefault()

// Validate input})

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

Chúng tôi muốn biết liệu đầu vào có trống không. Đối với mục đích của chúng tôi, trống có nghĩa là:

1. Người dùng chưa nhập bất cứ thứ gì vào trường
2. Người dùng đã nhập một hoặc nhiều khoảng trống, nhưng không phải các ký tự khác

Trong JavaScript, các điều kiện đạt/không đạt có thể được biểu diễn dưới dạng:

// Empty' ''  ''   '

// Filled'one-word''one-word '' one-word'' one-word ''one phrase with whitespace''one phrase with whitespace '' one phrase with whitespace'' one phrase with whitespace '

Kiểm tra điều này là dễ dàng. Chúng ta chỉ cần sử dụng trim phương pháp. trim loại bỏ bất kỳ khoảng trắng nào từ mặt trước và mặt sau của chuỗi.

const value = input.value.trim()

Nếu đầu vào hợp lệ, bạn có thể đặt data-state đến valid. Nếu đầu vào không hợp lệ, bạn có thể đặt data-state đến invalid.

// This is JavaScript 

input.addEventListener('input', evt => {  const value = input.value.trim()

if (value) {    input.dataset.state="valid"  } else {    input.dataset.state="invalid"  }})

/* This is CSS */

/* Show red borders when filled, but invalid */input[data-state="invalid"] {  border-color: hsl(0, 76%, 50%);}

/* Show green borders when valid */input[data-state="valid"] {  border-color: hsl(120, 76%, 50%);}This isn’t the end yet. We have a problem.

Khi người dùng nhập văn bản vào trường, quá trình xác thực đầu vào sẽ bắt đầu. Tuy nhiên, nếu người dùng xóa tất cả văn bản khỏi trường, đầu vào tiếp tục không hợp lệ.

Chúng tôi không muốn làm mất hiệu lực đầu vào nếu người dùng xóa tất cả văn bản. Họ có thể cần một chút thời gian để suy nghĩ, nhưng trạng thái vô hiệu sẽ đặt ra một cảnh báo không cần thiết.

Để khắc phục điều này, chúng tôi có thể kiểm tra xem người dùng đã nhập bất kỳ văn bản nào vào đầu vào chưa trước khi chúng tôi trim nó.

input.addEventListener('input', evt => {  const value = input.value

if (!value) {    input.dataset.state=""    return  }

const trimmed = value.trim()

if (trimmed) {    input.dataset.state="valid"  } else {    input.dataset.state="invalid"  }})

Đây là một Codepen để bạn chơi với:

Xem xác thực Pen Empty bằng JavaScript của Zell Liew (@zellwk) trên CodePen.

Cảm ơn vì đã đọc. Bài viết này đã giúp bạn ra ngoài? Nếu nó đã làm, tôi hy vọng bạn xem xét chia sẻ nó. Bạn có thể giúp đỡ người khác ra ngoài. Cám ơn rất nhiều!

Bài viết này ban đầu được đăng tại blog của tôi.
Đăng ký nhận bản tin của tôi nếu bạn muốn có nhiều bài viết hơn để giúp bạn trở thành nhà phát triển giao diện người dùng tốt hơn.