Question

我在这样的表格中有一个字段：

<input type="text" minlength="20" name="description" id="description" />

键入时，minlength验证效果很好。但是，如果以编程方式设置输入的值，则验证不会触发。

var field = document.querySelector("#description");

// type a couple of character into the field
field.validity.tooShort;
// true

field.value = '';
field.validity.tooShort;
// false

有解决方法吗？还是有计划的修复？我使用它错了吗？

Answer 1

您可以使用

强制执行验证过程

field.checkValidity();

请参阅MSDN about checkValidity()

这个页面是关于select的，但它当然对每个输入字段都有效。

编辑：我的不好，这不起作用，你应该手动进行验证。

Answer 2

今天偶然发现了这个问题，您可以通过 pattern 验证来解决它：

<input type="text" pattern="^.{20,}$" name="description" id="description" />

JS：

var field = document.querySelector("#description");
field.value = 'too short';
field.validity.patternMismatch;
// true

field.value = 'very very very very very very long';
field.validity.patternMismatch;
// false

如何以编程方式设置字段时如何触发最小长度验证？

2 个答案: