在更改之前验证JS中的HTML输入

Question

看起来当一个input元素最初被加载时，它的有效性并没有立即被评估。例如，如果我的HTML看起来像这样…

<input type="text" value="ABC" minlength="5">

在JavaScript中，尽管value属性被设置为长度小于5，但输入似乎是有效的且不太短。例如:

const input = document.querySelector("input");
console.log(input.validity.valid); // true
console.log(input.validity.tooShort); // false

只有当用户更改输入时，我们才能真正计算输入的有效性。

是否有办法强制输入在加载时评估其实际有效性，即使用户尚未接触输入?

参见示例:https://jsfiddle.net/t5afujkn/3/

Answer 1

我猜原因是您的默认值没有从<input>直接在加载时检查，因为它可能不会触发默认值的检查。

您可以在js中添加另一个检查条件，如下所示:

{
const displayObj = {
valid: input.validity.valid,
tooShort: input.validity.tooShort
};
if (input.value.length < 5) {
displayObj.valid = false;
displayObj.tooShort = true;
document.querySelector("p").textContent = JSON.stringify(displayObj);
}
}

或者您也可以尝试将if条件放在按钮调用之外的某个地方。

我也做了一个更新在JSFiddle;不确定是否能看到:https://jsfiddle.net/2Lhp96ct/6/