• <tt id="o8i8s"></tt>
    <small id="o8i8s"><bdo id="o8i8s"></bdo></small>
  • <samp id="o8i8s"><object id="o8i8s"></object></samp>
  • <xmp id="o8i8s"><nav id="o8i8s"></nav>
  • 成都百度快照優化|成都百度關鍵詞排名優化|成都SEO【思為網絡】 --【思為網絡】成都專業網站優化公司,公司擁有專業搜索引擎優化團隊,提供網站整站優化(網站結構優化、網站內容優化、網站外部優化)、百度排名首頁優化、GOOGLE優化排名
    成都百度關鍵詞排名優化--成都百度快照首頁排名優化
    你的位置:首頁 ? 網頁設計制作 ? 正文

    網頁設計中靈活使用HTML5表單驗證技術

    2016-6-16 23:57:50 | 作者:sw996 | 0個評論 | 人瀏覽

    當你在網站中使用一個表單的時候,對某些字段進行驗證是必須的。如果不這樣做,有可能某些客戶信息是錯誤的,還會在你的數據庫中積累大量的垃圾數據,甚至會危害你的網站安全。表單驗證已經成為大家的一個共識。在服務器端,我們可以通過程序很容易的控制它們,在客戶端,我們通常是集成一些Javascript來實現客戶端表單的驗證。


    當你在網站中使用一個表單的時候,對某些字段進行驗證是必須的。如果不這樣做,有可能某些客戶信息是錯誤的,還會在你的數據庫中積累大量的垃圾數據,甚至會危害你的網站安全。表單驗證已經成為大家的一個共識。在服務器端,我們可以通過程序很容易的控制它們,在客戶端,我們通常是集成一些Javascript來實現客戶端表單的驗證。

    現在,HMTL5給我們提供了一些特性來處理大多數你需要驗證的字段。HTML5通過提供一些特殊屬性、新的input類型來實現內置的表單驗證支持,并且很容易通過CSS來控制它們的樣式。

     

    下面來看一看HTML5表單驗證的基本介紹。

    1、新的INPUT TYPES類型

    HTML5引進了不少新的input type類型??梢允褂盟鼈儊韯摻ńY束制定data數據的input輸入框。

    下面是新的HTML5 type類型:

    1.  color

    2. date

    3. datetime

    4. datetime-local

    5. email

    6.  month

    7. number

    8. range

    9.  search

    10. tel

    11.  time

    12. url

    13. week

    可以像下面這樣使用它們:

    <input type="email"/>                                

    如果瀏覽器不支持該type類型,那么input就和普通的輸入框一樣。另外,一些input字段(例如:“email”和“tel”)可以自動打開移動手機的專門的鍵盤。

    更多關于input types類型的細節,可以參考MDN wiki,點擊這里查看。

    2、必填字段

    通過簡單的在<input>、<select>或<textarea>上添加“required”屬性,可以將這些表單字段設置為必填字段。

    <input type="checkbox" name="terms" required >                               

    這里有個問題,你可以在必填字段中隨意填寫任何數據,甚至是一個空格也可以,一會我們將教你如何解決這個問題。

    當你在一個email字段或url字段中設置required,瀏覽器希望得到一個正確的email或url格式,但是,形如“z@zz”的電子郵件格式也會被認為是正確的。

    3、范圍限制

    我們可以在number指定中設置一些限制條件如:max length 或 minimum、maximum等。要現在在input字段或textareas的文字長度,使用“maxlength”屬性。如果你想通過粘貼一個長字符串來突破限制,表單將簡單的進行字符串截斷。

    <input type="text" name="name" required  maxlength="15">                                

    <input type=”number”>字段使用“min”和“max”屬性來創建一個范圍。

    <input type="number" name="age" min="18" required>                                

    4、樣式

    可以通過CSS3偽類來為表單的各種狀態提供樣式。

    o :valid

    o :invalid

    o :required

    o :optional

    o :in-range

    o :out-of-range

    o :read-only

    o :read-write

    意思是說,你可以設置必填字段為一種樣式,可選字段為另一種樣式,等等...

    在我們的DEMO中,我們通過“valid”和“invalid”選擇器結合“focu”偽類來在用戶使用該字段時將自動的顏色設置為紅色或綠色。

    input:focus:invalid,

    textarea:focus:invalid{

        border:solid 2px #F5192F;

    }

     

    input:focus:valid,

    textarea:focus:valid{

        border:solid 2px #18E109;

        background-color:#fff;

    }                                

    5、工具提示(TOOLTIPS)

    當你沒有正確填寫表單而點擊了提交按鈕的時候,錯誤字段上會有一個提示出現。通過設置字段的“title”屬性,我們可以在提示中顯示一些額外的信息。

    注意,不同的瀏覽器顯示的提示樣式是不同的。在Chrome瀏覽器中,title屬性中的文字將出現在錯誤提示信息的下面,文字要小一號。在Firefox瀏覽器中不會顯示你定制的title信息。

    <input type="text" name="name" title="Please enter your user name.">                                 

    錯誤提示框和文本可以使用javascript很容易的改變,這些將在以后的教程中介紹。

    模式(PATTERNS)

    "pattern"屬性可以讓開發者設置一個正則表達式,瀏覽器將在表單提交前使用正則表達式來驗證表單字段。這種驗證方式顯然要比data驗證更靈活準確。

    我們的DEMO中的email地址就是通過正則表達式來驗證的。

    <input type="email" name="email" required pattern="^\S+@\S+\.\S+$" title="example@mail.com">                                 

    教程就到這里,希望這篇教程能幫助你了解HTML5表單驗證方面的知識。


    已有0位網友發表了一針見血的評論,你還等什么?

    必填

    選填

    選填

    記住我,下次回復時不用重新輸入個人信息

    必填,不填不讓過哦,嘻嘻。

    ◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

    欧美人与动牲交免费观看网_亚洲毛片不卡av在线播放一区_乌克兰美女高潮呻吟_久久国内精品自在自线图片