从数字输入和验证中删除负值

Question

我觉得这是一个愚蠢的问题，抱歉。

我有一个 number 类型的输入，我想对其添加一些验证。这不是必需的，因此空字符串应该是有效的，负数也是有效的，但不是 - 符号。

考虑一下，现在我已经在该字段中输入 -102 并一个一个地删除符号，观察变化。

这是它的基本 codepen。如您所见，当只剩下一个 - 符号时，值 (event.target.value) 是一个 smpty 字符串，它应该是有效的。

那么，如何检查是否只剩下减号并将此字段标记为无效？

const el = document.getElementById('input');

el.addEventListener('keyup', (e) => {
  const value = e.target.value;
  console.log(value)
})

<input type="number" id="input">

Answer 1

你可以使用pattern只接受正数或负数

在 JS 中你可以调用方法 checkValidity() 或使用 {yourinput}.validity.valid 来检查输入的值是否有效

在 css 中，您可以使用伪 class :invalid 来设计当输入的值不符合 pattern/field 预期

时的输入

const el = document.getElementById('input');

el.addEventListener('keyup', (e) => {
  console.log(el.checkValidity());
  if (!el.checkValidity()) {
    //treat case input invalid
  }
})

input:invalid {
 color: red;
}

<input type="number" id="input" pattern="\d+">

从数字输入和验证中删除负值

Deleting a negative value from number input and validation

html

validation