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

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 设置无效值，这样我就可以测试我的组件的逻辑是否有效。

Answer 1

你可以使用

input.setCustomValidity("dummy value");

让input.validity.valid返回false。

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

input.setCustomValidity("");