亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

純CSS實(shí)現(xiàn)表單驗(yàn)證

sf_wangchong / 1759人閱讀

摘要：例如這樣以下例子來自優(yōu)秀的開源庫，年齡年齡不能為空年齡必須為數(shù)字值提交重置以上就是我們常規(guī)的表達(dá)驗(yàn)證了，基本就都是用來完成的，那么我們能不能用來實(shí)現(xiàn)呢答案是可以的。

作者：陳大魚頭


github： KRISACHAN
關(guān)于表單驗(yàn)證

在我們的日常業(yè)務(wù)中，表單驗(yàn)證是個(gè)很常見設(shè)計(jì)需求，像一些登錄注冊(cè)框，問卷調(diào)查也都需要用到表單驗(yàn)證。

一般我們的實(shí)現(xiàn)思路都是JS監(jiān)聽input框的輸入內(nèi)容，判斷用戶輸入內(nèi)容，從而以此來決定下一步的操作。

例如這樣：（以下例子來自優(yōu)秀的開源UI庫，element）


  
    
  
  
    提交
    重置

以上就是我們常規(guī)的表達(dá)驗(yàn)證了，基本就都是用JS來完成的，那么我們能不能用CSS來實(shí)現(xiàn)呢？答案是可以的。這里先上DEMO

CSS實(shí)現(xiàn)表單驗(yàn)證

上面的表單驗(yàn)證就完全是由CSS來實(shí)現(xiàn)的，核心屬性就是CSS Level 4的Validity。思路就是利用:valid跟:invalid可以對(duì)的value進(jìn)行判斷的特性。

這里是全部代碼 
/*
 * css
 */
 :root {
     --error-color: red;
 }
 .form > input {
     margin-bottom: 10px;
 }
 .form > .f-tips {
     color: var(--error-color);
     display: none;
 }
 input[type="text"]:invalid ~ input[type="submit"],
 input[type="password"]:invalid ~ input[type="submit"] {
     display: none;
 }
 input[required]:invalid + span {
     display: inline;
 }

 /*
  * html
  */


    賬號(hào)：
    
    請(qǐng)輸入正確的賬號(hào)

    密碼：
    
    請(qǐng)輸入正確的密碼
效果截圖

使用到的知識(shí)點(diǎn) 1. HTML5里的新屬性：pattern

MDN的解釋：

檢查控件值的正則表達(dá)式.。pattern必須匹配整個(gè)值，而不僅僅是某些子集.。使用title屬性來描述幫助用戶的模式.。當(dāng)類型屬性的值為text, search, tel, url 或 email時(shí)，此屬性適用，否則將被忽略。（兼容ie10+）

備注：

如果pattern里的驗(yàn)證規(guī)則不合法，例如多了長(zhǎng)度校驗(yàn)內(nèi)多了空格，也是會(huì)在控制臺(tái)報(bào)錯(cuò)的，詳情如下：

CSS與JS里的驗(yàn)證規(guī)則不一樣，以下寫法是會(huì)無效的，核心校驗(yàn)規(guī)則需要用[]包起來（目前從測(cè)試的幾個(gè)例子是這樣，具體詳情還需要翻查資料，如果有大佬知道更具體的信息，請(qǐng)告知，謝謝?。?/p>

2. CSS Level 4 選擇器的新屬性：invalid

詳細(xì)介紹請(qǐng)看我的博文[[譯]19個(gè)CSS level 4 選擇器](https://juejin.im/post/5ce3b3...

如果你、喜歡探討技術(shù)，或者對(duì)本文有任何的意見或建議，你可以掃描下方二維碼，關(guān)注微信公眾號(hào)“魚頭的Web海洋”，隨時(shí)與魚頭互動(dòng)。歡迎！衷心希望可以遇見你。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116105.html

相關(guān)文章

  • 純CSS實(shí)現(xiàn)表單驗(yàn)證

    摘要：作者陳大魚頭關(guān)于表單驗(yàn)證在我們的日常業(yè)務(wù)中，表單驗(yàn)證是個(gè)很常見設(shè)計(jì)需求，像一些登錄注冊(cè)框，問卷調(diào)查也都需要用到表單驗(yàn)證。這里先上實(shí)現(xiàn)表單驗(yàn)證上面的表單驗(yàn)證就完全是由來實(shí)現(xiàn)的，核心屬性就是的。 作者：陳大魚頭 github： KRISACHAN 關(guān)于表單驗(yàn)證 在我們的日常業(yè)務(wù)中，表單驗(yàn)證是個(gè)很常見設(shè)計(jì)需求，像一些登錄注冊(cè)框，問卷調(diào)查也都需要用到表單驗(yàn)證。 一般我們的實(shí)現(xiàn)思路都是JS監(jiān)聽i...

    番茄西紅柿 評(píng)論0 收藏0

  • 純CSS實(shí)現(xiàn)表單驗(yàn)證

    摘要：作者陳大魚頭關(guān)于表單驗(yàn)證在我們的日常業(yè)務(wù)中，表單驗(yàn)證是個(gè)很常見設(shè)計(jì)需求，像一些登錄注冊(cè)框，問卷調(diào)查也都需要用到表單驗(yàn)證。這里先上實(shí)現(xiàn)表單驗(yàn)證上面的表單驗(yàn)證就完全是由來實(shí)現(xiàn)的，核心屬性就是的。 作者：陳大魚頭 github： KRISACHAN 關(guān)于表單驗(yàn)證 在我們的日常業(yè)務(wù)中，表單驗(yàn)證是個(gè)很常見設(shè)計(jì)需求，像一些登錄注冊(cè)框，問卷調(diào)查也都需要用到表單驗(yàn)證。 一般我們的實(shí)現(xiàn)思路都是JS監(jiān)聽i...

    galaxy_robot 評(píng)論0 收藏0

  • HTML知識(shí)梳理（筆記）

    摘要：標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。這其中包括標(biāo)簽中的。參考鏈接默認(rèn)樣式問題處理瀏覽器的默認(rèn)樣式。讓瀏覽器知道元素的合法性。屬于，是進(jìn)行嚴(yán)格化的結(jié)果。機(jī)器容易理解結(jié)構(gòu)搜索讀屏軟件有助于優(yōu)化。是中的，是可以通過進(jìn)行更改的，是活的。 HTML常見元素 showImg(https://segmentfault.com/img/bVbdnq2?w=861&h=365); meta 定義和用法 ...

    amc 評(píng)論0 收藏0

  • 轉(zhuǎn)：CSS :placeholder-shown偽類實(shí)現(xiàn)Material Design占位符交互效果

    摘要：轉(zhuǎn)自偽類實(shí)現(xiàn)占位符交互效果一規(guī)范中占位符交互效果風(fēng)格占位符交互效果官方示意見此頁面。我們可以采用絕對(duì)定位最后，對(duì)這個(gè)元素在輸入框時(shí)候，以及非顯示的時(shí)候進(jìn)行重定位縮小并位移到上方四清除按鈕部分上是必要屬性，配合偽類實(shí)現(xiàn)我們的效果。 轉(zhuǎn)自： https://github.com/yougola/bl... CSS :placeholder-shown偽類實(shí)現(xiàn)Material Design占...

    gaara 評(píng)論0 收藏0

  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要：轉(zhuǎn)載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個(gè)整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。 轉(zhuǎn)載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

    netmou 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<