效果圖

專注于為中小企業(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ā)揮自己的想象力咯；

html

布局很簡單，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>

css

這里用的是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://www.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)