尽管此问题的答案提供了很好的信息,但仍不足以满足我的需求。根据哪个有效性规则失败,我需要显示不同的消息。在其他示例中,所有验证失败均使用相同的验证失败消息。
表单对象的“有效性”属性是创建多个验证失败消息的关键。
您可以在此网站上查看所有不同的“有效性”属性。
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”。