成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 1041人閱讀

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



作者：陳大魚頭


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

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

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

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

"numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  "年齡"
    prop="age"
    :rules="[
      { required: true, message: 年齡不能為空},
      { type: number, message: 年齡必須為數(shù)字值}
    ]"
  >
    type="age" v-model.number="numberValidateForm.age" autocomplete="off">
  
  
    type="primary" @click="submitForm(numberValidateForm)">提交
    "resetForm(numberValidateForm)">重置

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

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

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

這里是全部代碼 
/*
 * 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
  */
<form class="form" id="form" method="get" action="/api/form">
    賬號：
    <input data-title="賬號" pattern="w{6,10}" name="account" type="text" required />
    <span class="f-tips">請輸入正確的賬號span>
    <br />
    密碼：
    <input data-title="密碼" pattern="w{6,10}" name="password" type="password" required />
    <span class="f-tips">請輸入正確的密碼span>
    <br />
    <input name="button" type="submit" value="提交" />
form>
效果截圖

使用到的知識點

1. HTML5里的新屬性：pattern

MDN的解釋：

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

備注：

    如果pattern里的驗證規(guī)則不合法，例如多了長度校驗內(nèi)多了空格，也是會在控制臺報錯的，詳情如下：

"賬號" pattern="/[w]{6, 10}/" name="account" type="text" required />

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

"賬號" pattern="/w{6,10}/" name="account" type="text" required />

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

詳細介紹請看我的博文[譯]19個CSS level 4 選擇器



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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/7087.html

相關(guān)文章

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

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

    galaxy_robot 評論0 收藏0

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

    摘要：例如這樣以下例子來自優(yōu)秀的開源庫，年齡年齡不能為空年齡必須為數(shù)字值提交重置以上就是我們常規(guī)的表達驗證了，基本就都是用來完成的，那么我們能不能用來實現(xiàn)呢答案是可以的。 作者：陳大魚頭 github： KRISACHAN 關(guān)于表單驗證 在我們的日常業(yè)務(wù)中，表單驗證是個很常見設(shè)計需求，像一些登錄注冊框，問卷調(diào)查也都需要用到表單驗證。 一般我們的實現(xiàn)思路都是JS監(jiān)聽input框的輸入內(nèi)容...

    sf_wangchong 評論0 收藏0

  • HTML知識梳理（筆記）

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

    amc 評論0 收藏0

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

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

    gaara 評論0 收藏0

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

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

    netmou 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<