一、HTML5-- 新的結(jié)構(gòu)元素
二、HTML5-- figure、time、details、mark
三、HTML5-- details活學(xué)活用
四、HTML5-- 現(xiàn)存元素的變化
五、HTML5 -- Web表單
今天繼續(xù)學(xué)習(xí)Web表單相關(guān)的內(nèi)容，不過今天重點落實到實戰(zhàn)中，利用HTML5表單與CSS3-UI實現(xiàn)一款不錯的表單效果。
效果可看下面動圖：
如效果演示，我們今天就通過簡單幾行CSS就可實現(xiàn)。
1、HTML5新增的表單類型：tel、email、url（上一篇有介紹）
2、HTML5表單基本驗證：required屬性
3、HTML5表單自定義驗證規(guī)則：pattern屬性
1、CSS3用戶接口模塊中的偽類
2、自定義錯誤消息
既然是表單，我們得有基礎(chǔ)的表單HTML結(jié)構(gòu)，下面是我創(chuàng)建的結(jié)構(gòu)，三個表單都是必填字段，并且對于tel一欄我們設(shè)置了自定義的驗證規(guī)則：必須是11位數(shù)字。
<form>
<ol>
<li>
<label for="tel">Tel:</label>
<input type="tel" required name="" pattern="\d{11}" 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>創(chuàng)建完成后的效果如下，感覺和我們想要的效果差別還很大。本是同根生啊，一樣的HTML，咋這個這么丑。
別急，下面我們慢慢給它穿衣服。
下面使用簡單的規(guī)則，對該表單進(jìn)行美化：
* {
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;}
現(xiàn)在效果已經(jīng)很不錯了，不過離我們的目標(biāo)還有一段距離，現(xiàn)在我們該考慮下，表單驗證的各個環(huán)節(jié)，輸入框應(yīng)該長什么樣。上面的示例中有三種情況：
1、輸入框未激活時
2、輸入框激活（輸入不正確）
3、輸入框激活（輸入正確）
針對上面的三個情況，這里進(jìn)行了三個描述：
1、未激活時，必填表單顯示橙色提醒
2、激活時，輸入不正確，表單為深紅色提示
3、激活時，輸入正確，表單為綠色通過
與之相隨的是三個圖標(biāo)的變化。
當(dāng)我們定義把表單狀態(tài)定義完成以后其實我們心里已經(jīng)大致有個效果了，代碼是實現(xiàn)效果的工具，下面我們看下如何定義：
首先是輸入框未激活，此時的輸入框狀態(tài)為invalid以及required：
input:invalid:required {
background-image: url('nor.png');
box-shadow: 0 0 5px #f0bb18;
border: 2px solid #f0bb18;}其次是輸入框激活時，但還沒有輸入成功，此時輸入框狀態(tài)為focus以及invalid：
input:focus:invalid {
background-image: url('warn.png');
box-shadow: 0 0 5px #b01212;
border: 2px solid #b01212;}最后是輸入框激活時，表單輸入成功，這時候輸入框狀態(tài)為valid：
input:valid {
background-image: url('suc.png');
border: 2px solid #7ab526;}最后，對提交按鈕進(jìn)行修飾：
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選項需要繼續(xù)探索，我們僅僅使用了幾個就可以實現(xiàn)這么不錯的效果。
我們使用的偽類如下：
:valid —— 表單元素在內(nèi)容符合元素類型并驗證通過后，獲得該類
:invalid —— 如果表單元素內(nèi)容有誤，它將獲得該類
:required —— 任何擁有required屬性的表單元素應(yīng)用了此類
如果你不希望瀏覽器為表單驗證，使用novalidate屬性或formnovalidate屬性可以關(guān)閉瀏覽器驗證。
其中novalidate是表單form所具有的屬性，提交表單時會忽略任何錯誤提示和空白域。
<form novalidate> ...</form>
formnovalidate是input元素的屬性，可以為單個表單元素設(shè)置該屬性。
<form> ... <input type="submit" formnovalidate></form>
上述表單同樣不會觸發(fā)驗證。
在上面的例子中可以看到，瀏覽器會對我們的表單進(jìn)行驗證，在這個過程中會彈出錯誤消息。而隨著輸入的不同，這些驗證消息也是不一樣的。
我們雖然不能更改提示框的樣式，但我們可以使用JavaScript的setCustomValidity()函數(shù)修改錯誤文字：
<form>
<input oninput="check()" type="tel" id="tel"></form><script>
function check() {
tel = document.querySelector('#tel');
tel.setCustomValidity('請輸入正確的11位電話號碼');
}</script>那么，現(xiàn)在當(dāng)我們輸入的時候，提示內(nèi)容就變成我們自定義的了：
現(xiàn)在還有一個問題，瀏覽器的提示是不一樣的，為空時的提示和錯誤的提示文案不一樣，這樣我們應(yīng)該怎么分開處理呢？
這時候就需要validity來查看當(dāng)前的驗證狀態(tài)：
tel = document.querySelector('#tel');console.log( tel.validity )
如上圖所示，當(dāng)前驗證狀態(tài)為：customError，就是說用戶自定義的驗證失敗，我們可以根據(jù)這些狀態(tài)來動態(tài)的更新提示信息。如果最終驗證成功，其中的valid將變?yōu)閠rue。
function check( el ) {
var validity = el.validity;
if ( validity.valueMissing ) {
el.setCustomValidity('該字段為必填內(nèi)容');
} else if ( validity.patternMismatch ) {
el.setCustomValidity('輸入內(nèi)容不符合格式');
} else {
el.setCustomValidity('輸入有誤');
}}上述只是演示，實際場景時刻替換自己的提示內(nèi)容。
最后，可以通過validationMessage來獲取當(dāng)前的錯誤提示信息：
console.log( el.validationMessage )// "請?zhí)顚懘俗侄巍?quot;
在本次學(xué)習(xí)中做了一個簡單且最常見的Demo，另外介紹了一些關(guān)于表單驗證修飾的細(xì)節(jié)，雖然這些東西五年前就已經(jīng)有了，但補充基礎(chǔ)知識什么時候都不算晚。
今天學(xué)習(xí)了valid、invalid、required的使用，知識點雖小，但效果卻不錯，每次學(xué)習(xí)都有新發(fā)現(xiàn)，慢慢積累。
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 m.alabama37th.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
