你可能不知道的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; // 去除點選事件，讓按鈕無法點選（無法阻止鍵盤focus再回車觸發）

      &::after {
        content: "未通過驗證?"
      }
    }
  }
}
           

往期系列

css掩人耳目式海浪動效?，這可能是最簡單的實作方式了吧？️

你可能不知道的css騷操作 — switch切換?

html指令式實作tooltip文字提示，純css實作（無腳本）️

最後

本文到此結束，希望以上内容對你有些許幫助，如若喜歡請記得點個

贊

跟

關注

?

更多精彩内容盡在微信公衆号

「不會寫前端」

，将不定時更新最新、實用的前端技巧/技術性文章，歡迎關注 ?