專注于為中小企業(yè)提供網(wǎng)站建設、做網(wǎng)站服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)高青免費做網(wǎng)站提供優(yōu)質的服務。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動了上1000+企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉變。
表單元素中,有一個pattern
屬性,可以自定義正則表達式(如手機號、郵箱、.);valid偽類
,可以匹配通過pattern
驗證的元素;invalid偽類
則相反,可以匹配未通過pattern
驗證的元素;于是就可以隨便搞啦,上面的效果圖只是做一些簡單的效果,更多效果以及限制大家就發(fā)揮自己的想象力咯;
布局很簡單,input
跟button
是兄弟節(jié)點的關系,required
屬性是必填的意思,也就是輸入的內(nèi)容必須要驗證通過;
<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前端開發(fā)學習Q-q-u-n:784783012 ,分享學習的方法和需要注意的小細節(jié),不停更新最新的教程和學習方法(詳細的前端項目實戰(zhàn)教學視頻)
如果你喜歡這篇文章,請別忘記點個贊或者關注
本文名稱:web前端入門到實戰(zhàn):css騷操作之表單驗證
鏈接URL:http://m.rwnh.cn/article22/gdddjc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設、電子商務、響應式網(wǎng)站、網(wǎng)站建設、面包屑導航、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)