溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
表單元素中，有一個pattern屬性，可以自定義正則表達式（如手機號、郵箱、.）；valid偽類，可以匹配通過pattern驗證的元素；invalid偽類則相反，可以匹配未通過pattern驗證的元素；于是就可以隨便搞啦，上面的效果圖只是做一些簡單的效果，更多效果以及限制大家就發揮自己的想象力咯；
布局很簡單，input跟button是兄弟節點的關系，required屬性是必填的意思，也就是輸入的內容必須要驗證通過；
<section class="container">
<input type="text" name="tel" placeholder="請輸入手機號碼" pattern="^1[3456789]\d{9}$" required><br>
<input type="text" name="smscode" placeholder="請輸入驗證碼" pattern="\d{4}" required><br>
<button type="submit"></button>
</section>
這里用的是scss預處理器，結構清晰
input {
// 驗證通過時按鈕的樣式
&:valid {
&~button {
pointer-events: all;
cursor: pointer;
&::after {
content: "提交"
}
}
}
// 驗證不通過時按鈕的樣式
&:invalid {
&~button {
pointer-events: none; // 去除點擊事件，讓按鈕無法點擊
&::after {
content: "未通過驗證"
}
}
}
}
web前端開發學習Q-q-u-n：784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻）如果你喜歡這篇文章，請別忘記點個贊或者關注
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
