<var id="b3rx3"></var>

        <del id="b3rx3"><video id="b3rx3"></video></del>

            <big id="b3rx3"><strike id="b3rx3"></strike></big>

                <address id="b3rx3"></address>

                成都百度快照優化|成都百度關鍵詞排名優化|成都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专区_亚洲激情_扒开老师的粉嫩泬10p_xxxx欧美丰满大屁股