html5 input required oninvalid,为什么我的“ oninvalid”属性会让模式失败？

尽管此问题的答案提供了很好的信息，但仍不足以满足我的需求。根据哪个有效性规则失败，我需要显示不同的消息。在其他示例中，所有验证失败均使用相同的验证失败消息。

表单对象的“有效性”属性是创建多个验证失败消息的关键。

您可以在此网站上查看所有不同的“有效性”属性。

https://www.w3schools.com/js/js_validation_api.asp

本示例说明如何显示两个不同的验证消息。如果取消注释下面的console.log()行，则可以在输入字段时观察有效性属性的变化。

New Password:

pattern=".{6,}"

value=""

required

οninput="

setCustomValidity('');

checkValidity();

// console.log(validity);

if (validity.patternMismatch) {

setCustomValidity('Please enter at least six characters.');

}

else if (validity.valueMissing) {

setCustomValidity('This field is required.');

}

else if (validity.valid) {

setCustomValidity('');

}

// allow default validation message to appear for other validation failures

"

>

注意：一些有效性检查是特定于“类型”的。例如，如果type使用它们，则设置“ rangeOverflow”，“ rangeUnderflow”和“ stepMismatch”属性；输入=“ number”。