JS開(kāi)發(fā)驗(yàn)證表單教程之前端布局
驗(yàn)證表單
下面我們就來(lái)學(xué)習(xí)如何用 js 驗(yàn)證表單
html代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="div"> <form> <label>用戶名:</label> <input type="text" class="name" id="name"> <div id="sp" class="div"></div> <label>密 碼:</label> <input type="password" class="pwd" id="pwd"> <div id="sp1" class="div"></div> <label>郵 箱:</label> <input type="text" class="email" id="email"> <div id="sp2" class="div"></div> <label>愛(ài) 好:</label> <textarea rows="5" cols="30" class="txt" id="txt"></textarea> <div id="sp3" class="div"></div> <input type="button" class="sub" value="注冊(cè)" id="sub"> </form> </div> </body> </html>
我們來(lái)看以下預(yù)覽的效果圖：
在處理頁(yè)面樣式之前，我們先看下代碼
每一個(gè)文本框或者文本域，下面都有一個(gè)div 標(biāo)簽，這個(gè)是用來(lái)做什么的呢，當(dāng)我們使用javascript 驗(yàn)證表單的時(shí)候，如果沒(méi)有輸入內(nèi)容，我們將會(huì)給出提示信息，并把提示信息的內(nèi)容放在div 標(biāo)簽中
上述代碼中，我們看到了 id 和 class 屬性，我們可以通過(guò)這些來(lái)進(jìn)行制作樣式
這是沒(méi)有使用css 來(lái)進(jìn)行處理樣式，所以會(huì)顯的很難看，我們接下來(lái)就使用css 來(lái)改變樣式
