你可能不知道的css騷操作 — 表單驗證

andot 發布于2019-08-30 15:44 / 2020人閱讀

摘要：效果圖原理表單元素中，有一個屬性，可以自定義正則表達式如手機號郵箱身份證偽類，可以匹配通過驗證的元素偽類則相反，可以匹配未通過驗證的元素于是就可以隨便搞啦，上面的效果圖只是做一些簡單的效果，更多效果以及限制大家就發揮自己的想象力咯布局很

效果圖

原理

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

html

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

css

這里用的是scss預處理器，結構清晰

input {
  // 驗證通過時按鈕的樣式
  &:valid {
    &~button {
      pointer-events: all;
      cursor: pointer;

      &::after {
        content: "提交

GPU云服務器云服務器可能不知道地方你知道你應該知道你不知道的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116226.html

當大多數人對Vue理解到爐火純青的時候，是不是該思考一下怎么讓vue頁面騷氣起來

寫在前面當大多數人Vue理解的爐火純青的時候，你應該思考怎么讓vue頁面騷氣起來，下面就我個人在接觸Vue兩年的時間里，在實際工作中門戶網站在前端頁面交互應用和技巧，炒幾道小菜給大家分享一哈，我把它封裝成一個項目vue-portal-webUI（github源碼），不敢說是UI，但也是各種常見常遇到的情景吧，看懂代碼需要一些vue、axios、es6、scss基礎、數據基本上是mock，功能和場...

lingdududu 2019-08-26 12:12 評論0 收藏0
Android 截屏的各種騷操作

摘要：第四個提示不可截屏。代碼設置不允許截屏在項目里面，通過設置可以讓界面不允許執行截屏操作。這邊實際測試驗證了，只要禁止截屏的界面可見，就算它的回調了，也是不可以截屏的。本文公眾號「AndroidTraveler」首發。背景在實際的應用場景中，Android 手機的截屏其實是很普遍的。比如說 PPT 演示，比如說技術博客圖文并茂講解。因此懂得 Android 手機截屏的各種操作就顯得尤為...

番茄西紅柿 2019-05-23 15:17 評論0 收藏0
如何寫好一個vue組件,老夫的一年經驗全在這了

摘要：比如很好用的拖拽庫控制元素是否被拖動的行為。僅僅負責引入以及個人喜好把一個元素當做不可見的包裹元素，并在上面使用。你有什么寫組件的獨特技巧，不妨在評論區告訴我吧一個適用性良好的組件，一種是可配置項很多，另一種就是容易覆寫，從而擴展功能 Vue 組件的 API 來自三部分——prop、事件和插槽： prop 允許外部環境傳遞數據給組件 event 允許從組件內觸發外部環境的副作用 slo...

187J3X1 2019-05-22 10:29 評論0 收藏0
純CSS實現表單驗證

摘要：作者陳大魚頭關于表單驗證在我們的日常業務中，表單驗證是個很常見設計需求，像一些登錄注冊框，問卷調查也都需要用到表單驗證。這里先上實現表單驗證上面的表單驗證就完全是由來實現的，核心屬性就是的。作者：陳大魚頭 github： KRISACHAN 關于表單驗證在我們的日常業務中，表單驗證是個很常見設計需求，像一些登錄注冊框，問卷調查也都需要用到表單驗證。一般我們的實現思路都是JS監聽i...

番茄西紅柿 2019-05-23 15:55 評論0 收藏0