盡管此問題的答案提供了很好的信息，但仍不足以滿足我的需求。根據哪個有效性規則失敗，我需要顯示不同的消息。在其他示例中，所有驗證失敗均使用相同的驗證失敗消息。

表單對象的“有效性”屬性是創建多個驗證失敗消息的關鍵。

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

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”。

總結

以上是生活随笔為你收集整理的html5 input required oninvalid,为什么我的“ oninvalid”属性会让模式失败？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。