Как разрешить одно конкретное c слово в текстовое поле в форме с использованием javascript?

Question

У меня есть числовое поле для ввода от 1000 до 10000, но я также хочу разрешить одно только слово «Все» в этом поле, если пользователь вводит любое слово, а затем показывает ошибку. Я не писал для этого кода JavaScript, потому что не знаю, как это сделать. кто-нибудь может мне помочь, пожалуйста? Спасибо

<input type="text" class="form-control" id="validationCustom02" min="1000" max="10000" required>

Answer 1

Вот мое javascript решение: он использует один оператор If, чтобы проверить, является ли строка числом или ВСЕ. Технически вам не нужна функция isNaN, поэтому, если вы хотите ее удалить, оператор if все равно будет работать.

var _input = document.querySelector(".validate-num");
var _min= 1000;
var _max = 10000;

_input.addEventListener("input",function(){
   var _valid = ((isNaN(this.value) && this.value.toLowerCase() == "all") || (!isNaN(this.value) && (this.value >= _min && this.value <= _max)));

if(!_valid){
var error = document.getElementById("error");
 error.innerHTML = "Value Must be 1000 to 10000 or ALL";
}
});

<input type="text" class="validate-num form-control" id="validationCustom02" required>

Answer 2

Числовой тип не может содержать строки, вам понадобится ввод текста с прослушивателем событий, который выполняет проверку за вас. Здесь я добавил слушателя blur, он срабатывает, когда вы уходите от входа.

const inputElem = document.querySelector('#validationCustom02required');
inputElem.addEventListener('blur', (e) => {
  const val = e.target.value;
  let showError = false;
  if (isNaN(val)) {
    if (val.toLowerCase() !== 'all') {
      showError = true;
    }
  } else {
    const numVal = +val;
    if (val < 1000 || val > 10000) {
      showError = true;
    }
  }
  
  const errorElem = document.querySelector('#error');
    if (showError) {
      errorElem.innerText = 'Invalid; Value!';
    } else {
      errorElem.innerText = '';
    }
})

<input type="text" class="form-control" id="validationCustom02required">
<div id="error"></div>