javascript - 在使用 Javascript 传递一组 if 语句之前，如何禁用按钮？

Question

使用事件侦听器将一系列if语句附加到输入元素；在所有这些条件语句都通过之前，如何禁用按钮？

button = document.querySelector("#submit")
button.disabled = true
passwordInput.addEventListener("keyup", e => {
    let inputValidator = e.target.value
    let numberValidator= inputValidator.match(/\d+/g)
    if (inputValidator === "") {
        errorEmpty.style.display = "block"
    } else {
        errorEmpty.style.display = "none"
    }
    if (inputValidator.length < 20) {
        errorLength.style.display = "block"
    } else {
        errorLength.style.display = "none"
    }
    if (inputValidator === inputValidator.toLowerCase()) {
        errorUppercase.style.display = "block"
    } else {
        errorUppercase.style.display = "none"
    }
    if (inputValidator === inputValidator.toUpperCase()) {
        errorLowercase.style.display = "block"
    } else {
        errorLowercase.style.display = "none"
    }
    if (numberValidator == null) {
        errorNumber.style.display = "block"
    } else {
        errorNumber.style.display = "none"
    }
})

标签： javascript

Answer 1

相信你可以简单如下：

假设在您通过测试之前它是无效的。注意：您可以简单地使用单个 RegEx 来测试 20-30 个字符之间的所有数字。这更容易阅读。

如果您需要额外的测试，只需将它们添加到处理程序中。

简单演示：

const button = document.querySelector('#submit');
const error = document.querySelector('#error');

// assume invalid until tests pass
button.disabled = true;

passwordInput.addEventListener('keyup', (e) => {
  const currentValue = e.target.value;
  
  // only numbers, between 20 and 30 characters
  const isNumber = /^\d{20,30}$/.test(currentValue);

  if (!isNumber) {
    error.textContent = 'must be numeric, min 20 chars, max 30';
    
    return;
  }

  // if you need another test
  /*
  if (...) {
    error.textContent = 'must contain x/y etc';
    
    return;
  }
  */

  // ok
  error.textContent = '';
  button.disabled = false;
});

#error {
  color: red;
  display: block;
}

<div id="error">&nbsp;</div>
<input type="text" id='passwordInput' /><button id="submit" type="submit">Submit</button>