javascript - 如何以编程方式在输入类型 = 数字中设置无效值？

Question

我想为 type=number 的输入元素设置一个无效值。

我正在为我的组件编写单元测试，它使用 type=number 的输入，它的行为取决于输入是否为空。请注意，我将像 '1.2.3' 这样的无效值视为非空，即使它的 value 属性是 ''。虽然浏览器中的用户可以输入像“1.2.3”这样的无效值，但我无法为我的测试模拟它。

// let input be HTMLInputElement
input.value = '1.2.3';
console.log(input.value); // ""
console.log(input.validity.valid); // true

我想以某种方式为我的输入 type=number 设置无效值，所以我可以测试我的组件的逻辑是否有效。

标签： javascripthtmlinputnumbers

Answer 1

您可以使用

input.setCustomValidity("dummy value");

做出input.validity.valid回报false。

要了解其工作原理，请参阅此 CodePen。它的作用是设置一条错误消息，指示输入无效。要使其再次显示有效，请使用

input.setCustomValidity("");