溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家詳細介紹了css實現表單驗證功能的代碼示例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
原理
表單元素中，有一個pattern屬性，可以自定義正則表達式（如手機號、郵箱、身份證..）；valid偽類，可以匹配通過pattern驗證的元素；invalid偽類則相反，可以匹配未通過pattern驗證的元素。
html代碼
布局很簡單，input跟button是兄弟節點的關系，required屬性是必填的意思，也就是輸入的內容必須要驗證通過；
<section class="container">
<input type="text" name="tel" placeholder="請輸入手機號碼" pattern="^1[3456789]\d{9}$" required><br>
<input type="text" name="tel" placeholder="請輸入驗證碼" pattern="\d{4}" required><br>
<button type="submit"></button>css代碼
這里用的是scss預處理器
input {
// 驗證通過時按鈕的樣式
&:valid {
&~button {
pointer-events: all;
cursor: pointer;
&::after {
content: "提交:+1:"
}
}
}
// 驗證不通過時按鈕的樣式
&:invalid {
&~button {
pointer-events: none; // 去除點擊事件，讓按鈕無法點擊
&::after {
content: "未通過驗證:unamused:"
}
}
}
}關于css實現表單驗證功能的代碼示例就分享到這里了，當然并不止以上和大家分析的辦法，不過小編可以保證其準確性是絕對沒問題的。希望以上內容可以對大家有一定的參考價值，可以學以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
