效果圖

專注于為中小企業(yè)提供網站建設、做網站服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)高青免費做網站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網行業(yè)人才，有力地推動了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網站建設實現(xiàn)規(guī)模擴充和轉變。

原理

表單元素中，有一個pattern屬性，可以自定義正則表達式（如手機號、郵箱、.）；valid偽類，可以匹配通過pattern驗證的元素；invalid偽類則相反，可以匹配未通過pattern驗證的元素；于是就可以隨便搞啦，上面的效果圖只是做一些簡單的效果，更多效果以及限制大家就發(fā)揮自己的想象力咯；

html

布局很簡單，input跟button是兄弟節(jié)點的關系，required屬性是必填的意思，也就是輸入的內容必須要驗證通過；

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)教學視頻）

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