css如何實作表單驗證功能

原理

表單元素中，有一個pattern屬性，可以自訂正規表示式（如手機號碼、信箱、身分證..）；valid偽類，可以匹配通過pattern驗證的元素；invalid偽類則相反，可以匹配未通過pattern驗證的元素。

（推薦教學：CSS入門教學）

html程式碼

版面很簡單，input跟button是兄弟節點的關係，required屬性是必填的意思，也就是輸入的內容必須要驗證通過；

<section class="container">
  <input type="text" name="tel" placeholder="请输入手机号码" pattern="^1[3456789]\d{9}$" required><br>
  <input type="text" name="tel" placeholder="请输入验证码" pattern="\d{4}" required><br>
  <button type="submit"></button>

css代碼

#這裡用的是scss預處理器

input {
  // 验证通过时按钮的样式
  &:valid {
    &~button {
      pointer-events: all;
      cursor: pointer;
      &::after {
        content: "提交:+1:"
      }
    }
  }
  // 验证不通过时按钮的样式
  &:invalid {
    &~button {
      pointer-events: none; // 去除点击事件，让按钮无法点击
      &::after {
        content: "未通过验证:unamused:"
      }
    }
  }
}

相關影片教學推薦： css影片教學

以上是css如何實作表單驗證功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！