avascript 通常會被用到在數據被送往服務器前對 HTML 表單中所輸入的數據進行驗證，以驗證它的正確性無誤再被傳送到服務器。

下面有已經做好的表單，再次基礎上可以參考。

制作即時提示錯誤的特效

那么如何制作即時提示錯誤的特效呢？如下圖

使用DIV層的內容動態改變。在每個輸入框后添加一個DIV層, 根據用戶的輸入, 動態顯示錯誤信息

DIV層display屬性簡介

style是樣式 display 是樣式中的顯示 none和block都是顯示中的參數 none 為不顯示 block為顯示；

block : CSS1 塊對象的默認值。用該值為對象之后添加新行；

none : CSS1 隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間；

inline : CSS1 內聯對象的默認值。用該值將從對象中刪除行。

演示實現步驟

1、在登錄文本框后插入DIV標簽loginError （即沒有樣式的DIV層）

2.修改源代碼，設置DIV的顯示方式為inline，即和文本框在同一行的

div id=loginError style=display:inline

/div

3、添加文本框失去焦點的事件函數

function checkLogin( ){

var myDiv=document.getElementById(loginError);//獲取插入的div對象；

myDiv.innerHTML=;

var strName=document.userfrm.loginName.value;

if (strName.length == 0)

{

myDiv.innerHTML=font color='red'用戶名不能為空/font;

return;

};

}

……

INPUT name=loginName type=text onblur=checkLogin( )

//如果輸入的信息不合法，則利用DIV的innerHTML或innerText進行錯誤提示，innerText只能寫文本信息

如果你喜歡本文的話，可以關注作者頭條號，每天都會有精彩前端網站開發干貨與你共享哦!

技術等級】初級

【承接文章】《強大的CSS選擇器，CSS的核心技術，前端小白必備功底》

本文重點講解CSS技術中有關字體樣式的屬性以及這些屬性的取值。本文屬于前端開發的初級教程，適合于剛剛開始接觸CSS技術的學習者。

從本文開始，小海老師將帶領大家認識CSS技術中的所有屬性。我把CSS技術中的各個屬性進行了分類，首先我們從與字體樣式有關的屬性開始。

CSS中與字體有關的屬性包括以下六個：

• font-family

• font-size

• font-weight

• font-style

• font-variant

• color

一、字體樣式屬性：

CSS利用font-family屬性來設置字體或字體列表。

1、設置字體：

.sty01{font-family:黑體;}

上述代碼定義了用戶自定義類sty01，該樣式設置字體為“黑體”。利用class屬性取值為sty01樣式的HTML標記對中的文字將以“黑體”的字體顯示。

2、設置字體列表：

.sty02{font-family:漢儀綜藝體簡,微軟雅黑,黑體;}

上述代碼定義了用戶自定義類sty02，該樣式設置了一個字體列表。利用class屬性取值為sty02樣式的HTML標記對中的文字，首先以“漢儀綜藝體簡”的字體顯示，目標瀏覽器所在的設備若沒有安裝該字體，則自動以“微軟雅黑”的字體顯示；目標瀏覽器所在的設備若也沒有安裝“微軟雅黑”字體，則自動以“黑體”的字體顯示。

注意：為了防止CSS文件的中文字體名稱不符合字符集的要求，所以習慣上都是用中文字體的外文名稱來書寫font-family屬性的取值，下面我就為大家羅列幾個常用的字體名稱。

• 設置字體為 微軟雅黑：.style1{font-family:Microsoft YaHei;}

• 設置字體為 宋體：.style2{font-family:SimSun;}

• 設置字體為 幼圓：.style3{font-family:YouYuan;}

• 設置字體為 黑體：.style4{font-family:SimHei;}

• 設置字體為 楷體：.style5{font-family:KaiTi;}

更多中文字體的西文名稱，小海老師會在后續的文章中詳細羅列。

二、字號大小屬性：

CSS利用font-size屬性來設置文本的字號效果

1、絕對大?。?/strong>

• xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large

上述取值中：medium為默認值，medium以上的取值越來越小，medium以下的取值越來越大。

2、相對大?。?/strong>

• smaller，比上一級元素的字體大小小一號。

• larger，比上一級元素的字體大小大一號。

代碼實例：

<div style=“font-size:14px;”>

<span style=“font-size:larger;”>段落文字內容</span>

</div>

上述代碼中“段落文字內容”的字體大小顯示為比14px字號大一號的外觀。

3、帶有單位的長度值：

代碼實例：.s1{font-size:16px;}

上述代碼定義了用戶自定義類s1，該樣式設置字號為16px大小。

4、百分比：

設置字體字號為上一級元素的百分比大小。

代碼實例：.s2{font-size:10%;}

上述代碼定義了用戶自定義類s2，該樣式設置字號是上一級元素的字體大小的20%。

三、字體粗細屬性

CSS利用font-weight屬性來設置文本的粗細效果

• normal，普通粗細，粗細度約為400。

• bold，粗體，粗細度約為700。

• bolder，更粗體，粗細度約為900。

• lighter，更細體，粗細度約為500。

• 100、200、300、400、500、600、700、800、900：9個粗細等級。

但是現在的瀏覽器都無法將字體的粗細渲染的如此細膩，也就是說這9個等級的粗細度并沒有明顯的差異。

四、字體斜體屬性

CSS利用font-style屬性來設置文本的斜體效果

• normal，普通，字體顯示為不斜體。

• italic，斜體，設置字體為斜體。

• oblique，傾斜體，當特殊字體沒有斜體效果時，可以使用該取值將字體傾斜。

五、設置字體是否為小型大寫字母

CSS技術利用font-variant屬性來設置是否為小型大寫字母

• normal，普通，字體顯示為正常。

• small-caps，小型大寫字母。

六、設置字體的顏色

CSS技術利用color屬性來設置文本顏色

• 十六進制顏色代碼。
  

實例：h1{color:#ff0000;}

含義：重定義HTML中的h1標記對為紅色。

• 十進制顏色代碼。

實例：h2{color:rgb(0,255,0);}

含義：重定義HTML中的h2標記對為綠色。

• 顏色英文單詞。

實例：h3{color:blue;}

含義：重定義HTML中的h3標記對為藍色。

文章預告

下一次小海老師會為大家講解CSS中有關文本段落的屬性，結合前面HTML的內容，可以對頁面中的段落進行更為細致的調整。千萬不要錯過哦。

小海聲明

如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。