Автор оригинала: FreeCodeCamp Community Member.
Zell Liew
На прошлой неделе я поделился как Проверьте, будет ли вход пуст с CSS Отказ Сегодня давайте поговорим о том же, но с JavaScript.
Это намного проще.
Вот что мы строят:
События для проверки ввода
Если вы хотите проверить вход, когда пользователь в поле в поле, вы можете использовать вход событие.
const input = document.querySelector('input')input.addEventListener('input', evt => { // Validate input})Если вы хотите проверить вход, когда пользователь представляет форму, вы можете использовать Отправить событие. Убедитесь, что вы предотвратите поведение по умолчанию с PreventDefault Отказ
Если вы не помешаете поведению по умолчанию, браузеры будут перемещаться по пользователю к URL-адресу, указанном в атрибуте действий.
const form = document.querySelector('form')form.addEventListener('submit', evt => { evt.preventDefault()// Validate input})
Проверка ввода
Мы хотим знать, пуст ввод. Для нашей цели пустые средства:
- Пользователь ничего не набрал в поле
- Пользователь набрал один или несколько пустых мест, но не другие персонажи
В JavaScript условия Pass/Fail могут быть представлены как:
// 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 '
Проверка этого легко. Нам просто нужно использовать обрезать метод. обрезать Удаляет любой пробел с передней и задней стороны строки.
const value = input.value.trim()
Если вход действителен, вы можете установить Дата-состояние к Действительно Отказ Если вход недействителен, вы можете установить Дата-состояние к Неверный Отказ
// 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.Когда пользователь вводит текст в поле, начинается проверка ввода. Однако, если пользователь удаляет весь текст с поля, вход продолжает быть недействительным.
Мы не хотим неверно использовать вход, если пользователь удаляет весь текст. Им может понадобиться мгновение, чтобы понадобиться, но недействительное государство устанавливает ненужную тревогу.
Чтобы исправить это, мы можем проверить, ввел ли пользователь на любой текст на ввод, прежде чем мы обрезать Это.
input.addEventListener('input', evt => { const value = input.valueif (!value) { input.dataset.state = '' return }const trimmed = value.trim()
if (trimmed) { input.dataset.state = 'valid' } else { input.dataset.state = 'invalid' }})Вот кодепен для вас, чтобы играть с:
Смотрите ручку Пустой валидация с JavaScript Zell Liew ( @zellwk ) на Кодепен Отказ
Спасибо за чтение. Эта статья поможет вам? Если это сделало, я надеюсь, что вы считаете делиться этим Отказ Вы можете помочь кому-то еще. Огромное спасибо!
Эта статья была первоначально опубликована в мой блог Отказ Подпишитесь на мой рассылка Если вы хотите больше статей, чтобы помочь вам стать лучшим разработчиком Frontend.