CSS中的oninvalid屬性是一個非常有用的功能,它可以用來設置表單驗證失敗時需要執行的操作。當用戶在一個input標簽中輸入了錯誤的數據格式時,可以通過設置oninvalid屬性來展示錯誤信息,或改變標簽的樣式。
input:invalid { border-color: red; box-shadow: 0 0 5px red; } input:valid { border-color: green; box-shadow: 0 0 5px green; }
上面的代碼中,我們可以看到設置了input標簽的valid和invalid狀態下的邊框顏色和陰影。這樣,當用戶輸入正確的格式時,input標簽的邊框將變為綠色以示正確,當用戶輸入錯誤時,邊框將變為紅色以示錯誤。
除了改變樣式外,我們也可以設置oninvalid屬性來展示錯誤信息。例如:
input:invalid { border-color: red; } input:invalid:after { content: '請輸入正確的郵箱地址'; color: red; }
上面的代碼中,當input標簽的內容格式錯誤時,將會在其后面顯示紅色錯誤提示信息,提示用戶請輸入正確的郵箱地址。
總之,CSS中的oninvalid屬性為表單驗證提供了很多實用的功能,可以通過它來設置樣式或者提示信息,來提高用戶的體驗。