web前端入門到實戰：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="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前端開發學習Q-q-u-n：784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端專案實戰教學視訊）

如果你喜歡這篇文章，請別忘記點個贊或者關注