by Zell Liew

由Zell Liew

如何使用JavaScript檢查輸入是否為空 (How to check if an input is empty with JavaScript)

Last week, I shared how to check if an input is empty with CSS. Today, let’s talk about the same thing, but with JavaScript.

上周，我分享了如何使用CSS檢查輸入是否為空 。 今天，讓我們談談同一件事，但使用JavaScript。

It’s much simpler.

這要簡單得多。

Here’s what we’re building:

這是我們正在構建的：

驗證輸入的事件 (Events to validate the input)

If you want to validate the input when a user types into the field, you can use the input event.

如果要在用戶在字段中鍵入內容時驗證輸入，則可以使用input事件。

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

If you want to validate the input when a user submits a form, you can use the submit event. Make sure you prevent the default behavior withpreventDefault.

如果要在用戶提交表單時驗證輸入，則可以使用submit事件。 確保使用preventDefault防止默認行為。

If you don’t prevent the default behavior, browsers will navigate the user to the URL stated in the action attribute.

如果您不阻止默認行為，瀏覽器將把用戶導航到action屬性中指定的URL。

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

// Validate input})

驗證輸入 (Validating the input)

We want to know whether an input is empty. For our purpose, empty means:

我們想知道輸入是否為空。 就我們的目的而言，空表示：

1. The user hasn’t typed anything into the field
   用戶尚未在該字段中輸入任何內容
2. The user has typed one or more empty spaces, but not other characters
   用戶鍵入了一個或多個空格，但沒有鍵入其他字符

In JavaScript, the pass/fail conditions can be represented as:

在JavaScript中，通過/失敗條件可以表示為：

// 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 '

Checking this is easy. We just need to use the trim method. trim removes any whitespace from the front and back of a string.

檢查很容易。 我們只需要使用trim方法。 trim刪除字符串前后的所有空格。

const value = input.value.trim()

If the input is valid, you can set data-state to valid. If the input is invalid, you can set the data-state to invalid.

如果輸入有效，則可以將data-state設置為valid 。 如果輸入無效，則可以將data-state設置為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.

When a user enters text into the field, input validation begins. However, if the user removes all text from the field, the input continues to be invalid.

當用戶在字段中輸入文本時，輸入驗證開始。 但是，如果用戶從字段中刪除了所有文本，則輸入將繼續無效。

We don’t want to invalidate the input if the user removes all text. They may need a moment to think, but the invalidated state sets off an unnecessary alarm.

如果用戶刪除了所有文本，我們不想使輸入無效。 他們可能需要花點時間思考，但是無效狀態會引發不必要的警報。

To fix this, we can check whether the user has entered any text into the input before we trim it.

要解決此問題，我們可以在trim之前檢查用戶是否在輸入中輸入了任何文本。

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'  }})

Here’s a Codepen for you to play with:

這是一個Codepen供您使用：

See the Pen Empty validation with JavaScript by Zell Liew (@zellwk) on CodePen.

見筆用JavaScript空驗證通過澤爾與Liew( @zellwk )上CodePen 。

Thanks for reading. Did this article help you out? If it did, I hope you consider sharing it. You might help someone else out. Thanks so much!

謝謝閱讀。 這篇文章對您有幫助嗎？ 如果確實如此，希望您考慮共享它 。 您可能會幫助別人。 非常感謝！

This article was originally posted at my blog.Sign up for my newsletter if you want more articles to help you become a better frontend developer.

本文最初發布在我的博客上 。 如果您想獲得更多文章來幫助您成為更好的前端開發人員，請注冊我的時事通訊 。

翻譯自: https://www.freecodecamp.org/news/checking-if-an-input-is-empty-with-javascript-d41ed5a6195f/