CSS可以通過正則表達式判斷一個郵箱地址是否符合格式要求。
input[type="email"]:invalid { border-color: red; } input[type="email"]:valid { border-color: green; }
上述代碼中,input元素必須設置type為email,以便瀏覽器將其識別為一個郵箱輸入框。
:invalid是偽類選擇器,表示該元素的值不符合規定的格式,比如輸入的不是有效的郵箱地址。
:valid則表示該元素的值符合規定的格式,比如輸入了一個有效的郵箱地址。
當郵箱地址不合法時,輸入框的邊框將會變成紅色。當郵箱地址合法時,邊框變成綠色。
使用CSS驗證郵箱格式可以在用戶輸入時及時提醒用戶輸入了錯誤的郵箱地址,提高用戶體驗。