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

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

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

預(yù)備知識(shí)

主要介紹內(nèi)容

正文

既然是表單，我們得有基礎(chǔ)的表單HTML結(jié)構(gòu)，下面是我創(chuàng)建的結(jié)構(gòu)，三個(gè)表單都是必填字段，并且對(duì)于tel一欄我們?cè)O(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)建完成后的效果如下，感覺(jué)和我們想要的效果差別還很大。本是同根生啊，一樣的HTML，咋這個(gè)這么丑。

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

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

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

與之相隨的是三個(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í)，但還沒(méi)有輸入成功，此時(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;}

最后，對(duì)提交按鈕進(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ò)的效果。

我們使用的偽類如下：

其他拓展

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ì)對(duì)我們的表單進(jìn)行驗(yàn)證，在這個(gè)過(guò)程中會(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('請(qǐng)輸入正確的11位電話號(hào)碼');
 }</script>

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

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

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

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

如上圖所示，當(dāng)前驗(yàn)證狀態(tài)為：customError，就是說(shuō)用戶自定義的驗(yàn)證失敗，我們可以根據(jù)這些狀態(tài)來(lá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í)際場(chǎng)景時(shí)刻替換自己的提示內(nèi)容。

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

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

總結(jié)

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

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com