今天繼續(xù)學(xué)習(xí)Web表單相關(guān)的內(nèi)容，不過今天重點(diǎn)落實(shí)到實(shí)戰(zhàn)中，利用HTML5表單與CSS3-UI實(shí)現(xiàn)一款不錯(cuò)的表單效果。

效果可看下面動(dòng)圖：

如效果演示，我們今天就通過簡單幾行CSS就可實(shí)現(xiàn)。

主要介紹內(nèi)容

1、CSS3用戶接口模塊中的偽類

2、自定義錯(cuò)誤消息

正文

既然是表單，我們得有基礎(chǔ)的表單HTML結(jié)構(gòu)，下面是我創(chuàng)建的結(jié)構(gòu)，三個(gè)表單都是必填字段，并且對于tel一欄我們設(shè)置了自定義的驗(yàn)證規(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，咋這個(gè)這么丑。

別急，下面我們慢慢給它穿衣服。

下面使用簡單的規(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)很不錯(cuò)了，不過離我們的目標(biāo)還有一段距離，現(xiàn)在我們該考慮下，表單驗(yàn)證的各個(gè)環(huán)節(jié)，輸入框應(yīng)該長什么樣。上面的示例中有三種情況：

1、輸入框未激活時(shí)
2、輸入框激活（輸入不正確）
3、輸入框激活（輸入正確）

針對上面的三個(gè)情況，這里進(jìn)行了三個(gè)描述：

1、未激活時(shí)，必填表單顯示橙色提醒
2、激活時(shí)，輸入不正確，表單為深紅色提示
3、激活時(shí)，輸入正確，表單為綠色通過

與之相隨的是三個(gè)圖標(biāo)的變化。

當(dāng)我們定義把表單狀態(tài)定義完成以后其實(shí)我們心里已經(jīng)大致有個(gè)效果了，代碼是實(shí)現(xiàn)效果的工具，下面我們看下如何定義：

首先是輸入框未激活，此時(shí)的輸入框狀態(tài)為invalid以及required：

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

其次是輸入框激活時(shí)，但還沒有輸入成功，此時(shí)輸入框狀態(tài)為focus以及invalid：

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

最后是輸入框激活時(shí)，表單輸入成功，這時(shí)候輸入框狀態(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;
}

怎么樣，還不錯(cuò)吧。

這里不先介紹所有的新CSS選項(xiàng)，更多的CSS選項(xiàng)需要繼續(xù)探索，我們僅僅使用了幾個(gè)就可以實(shí)現(xiàn)這么不錯(cuò)的效果。

我們使用的偽類如下：

:valid —— 表單元素在內(nèi)容符合元素類型并驗(yàn)證通過后，獲得該類
:invalid —— 如果表單元素內(nèi)容有誤，它將獲得該類
:required —— 任何擁有required屬性的表單元素應(yīng)用了此類

其他拓展

1、不觸發(fā)瀏覽器驗(yàn)證

如果你不希望瀏覽器為表單驗(yàn)證，使用novalidate屬性或formnovalidate屬性可以關(guān)閉瀏覽器驗(yàn)證。

其中novalidate是表單form所具有的屬性，提交表單時(shí)會(huì)忽略任何錯(cuò)誤提示和空白域。

<form novalidate>
    ...
</form>

formnovalidate是input元素的屬性，可以為單個(gè)表單元素設(shè)置該屬性。

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

上述表單同樣不會(huì)觸發(fā)驗(yàn)證。

2、自定義錯(cuò)誤提示內(nèi)容

在上面的例子中可以看到，瀏覽器會(huì)對我們的表單進(jìn)行驗(yàn)證，在這個(gè)過程中會(huì)彈出錯(cuò)誤消息。而隨著輸入的不同，這些驗(yàn)證消息也是不一樣的。

我們雖然不能更改提示框的樣式，但我們可以使用JavaScript的setCustomValidity()函數(shù)修改錯(cuò)誤文字：

<form>
    <input oninput="check()" type="tel" id="tel">
</form>
<script>
    function check() {
        tel = document.querySelector('#tel');
        tel.setCustomValidity('請輸入正確的11位電話號碼');
    }
</script>

那么，現(xiàn)在當(dāng)我們輸入的時(shí)候，提示內(nèi)容就變成我們自定義的了：

現(xiàn)在還有一個(gè)問題，瀏覽器的提示是不一樣的，為空時(shí)的提示和錯(cuò)誤的提示文案不一樣，這樣我們應(yīng)該怎么分開處理呢？

這時(shí)候就需要validity來查看當(dāng)前的驗(yàn)證狀態(tài)：

tel = document.querySelector('#tel');
console.log( tel.validity )

如上圖所示，當(dāng)前驗(yàn)證狀態(tài)為：customError，就是說用戶自定義的驗(yàn)證失敗，我們可以根據(jù)這些狀態(tài)來動(dòng)態(tài)的更新提示信息。如果最終驗(yàn)證成功，其中的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('輸入有誤');
    }
}

上述只是演示，實(shí)際場景時(shí)刻替換自己的提示內(nèi)容。

最后，可以通過validationMessage來獲取當(dāng)前的錯(cuò)誤提示信息：

console.log( el.validationMessage )
// "請?zhí)顚懘俗侄巍?quot;

總結(jié)

在本次學(xué)習(xí)中做了一個(gè)簡單且最常見的Demo，另外介紹了一些關(guān)于表單驗(yàn)證修飾的細(xì)節(jié)，雖然這些東西五年前就已經(jīng)有了，但補(bǔ)充基礎(chǔ)知識什么時(shí)候都不算晚。

今天學(xué)習(xí)了valid、invalid、required的使用，知識點(diǎn)雖小，但效果卻不錯(cuò)，每次學(xué)習(xí)都有新發(fā)現(xiàn)，慢慢積累。

最新評論