首頁  >  文章  >  web前端  >  純CSS3實現不錯的表單驗證效果的程式碼分享(圖)

純CSS3實現不錯的表單驗證效果的程式碼分享(圖)

黄舟
黄舟原創
2017-04-18 09:41:401586瀏覽

這是補充HTML5基礎的系列內容,其他為:

  • 一、HTML5-- 新的結構元素

  • 二、HTML5-- figure、time、details、mark

  • 三、HTML5-- details活體用

  • 純CSS3實現不錯的表單驗證效果的程式碼分享(圖)

  • #四、HTML5-- 現存元素的變化

  • 五、HTML5 -- Web表單

  • 今天繼續學習Web表單相關的內容,不過今天重點落實到實戰中,利用HTML5表單與CSS3-UI實現一款不錯的表單效果。

    效果可看下面動圖:
  • 純CSS3實現不錯的表單驗證效果的程式碼分享(圖)如效果演示,我們今天就透過簡單幾行CSS就可實現。

    預備知識

    1、HTML5新增的表單類型:tel、email、url(上一篇有介紹)


  • 2、HTML5表單基本驗證:required屬性

  • 3、HTML5表單自訂驗證規則:pattern屬性純CSS3實現不錯的表單驗證效果的程式碼分享(圖)

    主要介紹內容

    #1、CSS3用戶介面模組中的偽類別
  • 2、自訂錯誤訊息
  • 正文
  • #既然是表單,我們得有基礎的表單HTML結構,下面是我創建的結構,三個表單都是必填字段,並且對於tel一欄我們設置了自定義的驗證規則:必須是純CSS3實現不錯的表單驗證效果的程式碼分享(圖)位數字。

    <form>
     <ol>
       <li>
         <label for="tel">Tel:</label>
         <input type="tel" required name="" pattern="\d{純CSS3實現不錯的表單驗證效果的程式碼分享(圖)}" id="tel">
       </li>
       <li>
         <label for="url">Website:</label>
         <input type="url" required name="" id="url">
       </li>
       <li>
         <label for="email">Email:</label>
         <input type="email" required name="" id="email">
       </li>
       <li>
         <input type="submit" name="" value="Send the form">
       </li>
     </ol>
    </form>

  •  

  • 完成完成後的效果如下,感覺和我們想要的效果差異還很大。本是同根生啊,一樣的HTML,咋這個這麼醜。

  • 別急,下面我們慢慢幫它穿衣服。

  • 下面使用簡單的規則,對該表單進行美化:
  • * {
        margin: 0;
        font: 13px tahoma, verdana, sans-serif;
        padding: 0;
    }
    ol {
        width: 400px;
        margin: 50px;
    }
    li {
        clear: both;
        list-style-type: none;
        margin: 0 0 10px;
    }
    li:nth-last-child(1) {
        text-align: center;
    }
    label {
        display: block;
        float: left;
        margin: 0 10px 0 0;
        padding: 5px;
        text-align: right;
        width: 100px;
    }
    input {
        border-radius: 5px;
        padding: 5px 5px 5px 30px;
        width: 155px;
    }
    input:focus {
        outline: none;
    }

     

    純CSS3實現不錯的表單驗證效果的程式碼分享(圖)

    ##現在效果已經很不錯了,不過離我們的目標還有一段距離,現在我們該考慮下,表單驗證

    的各個環節,輸入框應該長什麼樣子。上面的範例中有三種情況:

    1、輸入框未啟動時

  • 2、輸入框啟動(輸入不正確)

  • 3、輸入框啟動(輸入正確)
  • 針對上面的三個情況,這裡進行了三個描述:
  • 1 、未啟動時,必填表單顯示橘色提醒


  • 2、啟動時,輸入不正確,表單為深紅色提示

  • ##3 、啟動時,輸入正確,表單為綠色透過

    與之相隨的是三個圖示的變化。

  • 當我們定義把表單

    狀態純CSS3實現不錯的表單驗證效果的程式碼分享(圖)定義完成以後其實我們心裡已經大致有個效果了,程式碼是實現效果的工具,下面我們看下如何定義:

    首先是輸入框未激活,此時的輸入框狀態為invalid以及required:

    input:invalid:required {
        background-image: url(&#39;nor.png&#39;);
        box-shadow: 0 0 5px #f0bb18;
        border: 2px solid #f0bb18;
    }

    ## 
  • #其次是輸入框啟動時,但還沒有輸入成功,此時輸入框狀態為focus以及invalid:
  • input:focus:invalid {
        background-image: url(&#39;warn.png&#39;);
        box-shadow: 0 0 5px #b01212;
        border: 2px solid #b01212;
    }
  •  

  • ##最後是輸入框啟動時,表單輸入成功,此時輸入框狀態為valid:
  • input:valid {
        background-image: url(&#39;suc.png&#39;);
        border: 2px solid #7ab526;
    }

     

    最後,對提交

    按鈕

    修飾:

    input[type="submit"] {
        background: #7ab526;
        border: none;
        box-shadow: 0 0 5px #7ab526;
        color: #fff;
        cursor: pointer;
        font-weight: bold;
        padding: 7px;
        width: 150px;
    }


     

  • #怎麼樣,還好。

  • 這裡不先介紹所有的新CSS選項,更多的CSS選項需要繼續探索,我們僅僅使用了幾個就可以實現這麼不錯的效果。

    我們使用的偽類別如下:
  • :valid —— 表單元素在內容符合元素類型並驗證通過後,獲得該類別######### ###:invalid —— 如果表單元素內容有誤,它將獲得該類別############:required —— 任何擁有required屬性的表單元素都套用了這類##### #####其他拓展######1、不觸發瀏覽器驗證######如果你不希望瀏覽器為表單驗證,使用novalidate屬性或formnovalidate屬性可以關閉瀏覽器驗證。 ######其中novalidate是表單form所具有的屬性,提交表單時會忽略任何錯誤提示和空白域。 ############
    <form novalidate>
        ...
    </form>
    ###### ##########formnovalidate是input元素的屬性,可以設定單一表單元素。 ###
    <form>
        ...
        <input type="submit" formnovalidate>
    </form>
    ###### #########上述表單同樣不會觸發驗證。 ###

    2、自定义错误提示内容

    在上面的例子中可以看到,浏览器会对我们的表单进行验证,在这个过程中会弹出错误消息。而随着输入的不同,这些验证消息也是不一样的。

    純CSS3實現不錯的表單驗證效果的程式碼分享(圖)

    我们虽然不能更改提示框的样式,但我们可以使用JavaScript的setCustomValidity()函数修改错误文字:


    <form>
        <input oninput="check()" type="tel" id="tel">
    </form>
    <script>
     function check() {
     tel = document.querySelector(&#39;#tel&#39;);
     tel.setCustomValidity(&#39;请输入正确的純CSS3實現不錯的表單驗證效果的程式碼分享(圖)位电话号码&#39;);
     }
    </script>
  •  

  • 那么,现在当我们输入的时候,提示内容就变成我们自定义的了:

    純CSS3實現不錯的表單驗證效果的程式碼分享(圖)

    现在还有一个问题,浏览器的提示是不一样的,为空时的提示和错误的提示文案不一样,这样我们应该怎么分开处理呢?

    这时候就需要validity来查看当前的验证状态:


    tel = document.querySelector(&#39;#tel&#39;);
    console.log( tel.validity )
  •  

  • 純CSS3實現不錯的表單驗證效果的程式碼分享(圖)

    如上图所示,当前验证状态为:customError,就是说用户自定义的验证失败,我们可以根据这些状态来动态的更新提示信息。如果最终验证成功,其中的valid将变为true。


    function check( el ) {
        var validity = el.validity;
        if ( validity.valueMissing ) {
            el.setCustomValidity(&#39;该字段为必填内容&#39;);
        } else if ( validity.patternMismatch ) {
            el.setCustomValidity(&#39;输入内容不符合格式&#39;);
        } else {
            el.setCustomValidity(&#39;输入有误&#39;);
        }
    }
  •  

  • 上述只是演示,实际场景时刻替换自己的提示内容。

    最后,可以通过validationMessage来获取当前的错误提示信息:

    console.log( el.validationMessage )
    // "请填写此字段。"
  •  

  • 总结

    在本次学习中做了一个简单且最常见的Demo,另外介绍了一些关于表单验证修饰的细节,虽然这些东西五年前就已经有了,但补充基础知识什么时候都不算晚。

    今天学习了valid、invalid、required的使用,知识点虽小,但效果却不错,每次学习都有新发现,慢慢积累。

    <form>
     <ol>
       <li>
         <label for="tel">Tel:</label>
         <input type="tel" required name="" pattern="\d{純CSS3實現不錯的表單驗證效果的程式碼分享(圖)}" id="tel">
       </li>
       <li>
         <label for="url">Website:</label>
         <input type="url" required name="" id="url">
       </li>
       <li>
         <label for="email">Email:</label>
         <input type="email" required name="" id="email">
       </li>
       <li>
         <input type="submit" name="" value="Send the form">
       </li>
     </ol>
    </form>

  • * {
        margin: 0;
        font: 13px tahoma, verdana, sans-serif;
        padding: 0;
    }
    ol {
        width: 400px;
        margin: 50px;
    }
    li {
        clear: both;
        list-style-type: none;
        margin: 0 0 10px;
    }
    li:nth-last-child(1) {
        text-align: center;
    }
    label {
        display: block;
        float: left;
        margin: 0 10px 0 0;
        padding: 5px;
        text-align: right;
        width: 100px;
    }
    input {
        border-radius: 5px;
        padding: 5px 5px 5px 30px;
        width: 155px;
    }
    input:focus {
        outline: none;
    }

  • input:invalid:required {
        background-image: url(&#39;nor.png&#39;);
        box-shadow: 0 0 5px #f0bb18;
        border: 2px solid #f0bb18;
    }

  • input:focus:invalid {
        background-image: url(&#39;warn.png&#39;);
        box-shadow: 0 0 5px #b01212;
        border: 2px solid #b01212;
    }

  • input:valid {
        background-image: url(&#39;suc.png&#39;);
        border: 2px solid #7ab526;
    }

  • input[type="submit"] {
        background: #7ab526;
        border: none;
        box-shadow: 0 0 5px #7ab526;
        color: #fff;
        cursor: pointer;
        font-weight: bold;
        padding: 7px;
        width: 150px;
    }

  • <form novalidate>
        ...
    </form>

  • <form>
        ...
        <input type="submit" formnovalidate>
    </form>

  • <form>
        <input oninput="check()" type="tel" id="tel">
    </form>
    <script>
     function check() {
     tel = document.querySelector(&#39;#tel&#39;);
     tel.setCustomValidity(&#39;请输入正确的純CSS3實現不錯的表單驗證效果的程式碼分享(圖)位电话号码&#39;);
     }
    </script>

  • tel = document.querySelector(&#39;#tel&#39;);
    console.log( tel.validity )

  • function check( el ) {
        var validity = el.validity;
        if ( validity.valueMissing ) {
            el.setCustomValidity(&#39;该字段为必填内容&#39;);
        } else if ( validity.patternMismatch ) {
            el.setCustomValidity(&#39;输入内容不符合格式&#39;);
        } else {
            el.setCustomValidity(&#39;输入有误&#39;);
        }
    }

  • console.log( el.validationMessage )
    // "请填写此字段。"

以上是純CSS3實現不錯的表單驗證效果的程式碼分享(圖)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn