今天研究了網易“用戶注冊表單”與“及時驗證功能”，不得不說，無論是它的布局結構，還是驗證功能，都是刷新了本真人的眼界，居然可以這樣！
來圖鎮樓！
html代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>網易新用戶注冊頁面</title> <script type="text/javascript" src="js/js1.js"></script> <link href="css/style1.css" rel="external nofollow" rel="stylesheet" /> <script type="text/javascript"> function aa(){ var reg = /[/u4e00-/u9fa5]/g;/*這里本真人，已做修改*/ var name = document.getElementById("realName").value; if(reg.test(name)==false){ alert("只能為漢字"); }else{ alert("正確"); } } </script></head><body> <!--logo位置--> <div id="header"><img src="img/register_logo.png" alt="logo"/></div> <div id="main"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--看不見的第一行--> <tr> <td class="bg bg_top_left"></td> <td class="bg_top"></td> <td class="bg bg_top_right"></td> </tr> <!--看得見的第二行--> <tr> <td class="bg_left"></td> <td class="content"> <!--表單提交，因本真人是解析來著，算不出網易服務器地址，就不詳細介紹了--> <form action="" method="post" name="myform" onsubmit="return checkForm()"> <!--居然采用自定義列表，嘿嘿--> <dl> <dt>通行證用戶名：</dt> <dd><input type="text" id="userName" class="inputs userWidth" onfocus="userNameFocus()" onblur="userNameBlur()"/>@163.com</dd> <div id="userNameId"></div><!--這里當做提示框！--> </dl> <dl> <dt>登錄密碼：</dt> <dd><input type="password" id="pwd" class="inputs" onfocus="pwdFocus()" onblur="pwdBlur()"/></dd> <div id="pwdId"></div> </dl> <dl> <dt>重復登錄密碼：</dt><!--這里只有onblur:用戶使用邏輯使然--> <dd><input type="password" id="repwd" class="inputs" onblur="repwdBlur()"/></dd> <div id="repwdId"></div> </dl> <dl> <dt>性別：</dt><!--性別這里居然不給設置驗證，就一個默認，本真人有點不服--> <dd><input type="radio" name="sex" value="男" checked="checked"/>男 <input type="radio" name="sex" value="女" />女 </dd> </dl> <dl> <dt>真實姓名：</dt><!--aa():這名字,本真人有點醉...--> <dd><input type="text" id="realName" class="inputs" onblur="aa()"/></dd> <div id="userNameId"></div> </dl> <dl> <dt>昵稱：</dt><!--解析到這里本真人終于明白了為什么有些input沒有onfocus:有onfocus的是為了讓表單上彈出，本真人一直認為很風騷的提示！--> <dd><input type="text" id="nickName" class="inputs" onfocus="nickNameFocus()" onblur="nickNameBlur()"/></dd> <div id="nickNameId"></div> </dl> <dl> <dt>關聯手機號：</dt> <dd><input type="text" id="tel" class="inputs" onfocus="telFocus()" onblur="telBlur()"/></dd> <div id="telId"></div> </dl> <dl> <dt>保密郵箱：</dt> <dd><input type="text" id="email" class="inputs" onfocus="emailFocus()" onblur="emailBlur()"/></dd> <div id="emailId"></div> </dl> <dl> <dt></dt><!--輸入框為image類型的還真不常見--> <dd><input name=" " type="image" src="img/button.png"/></dd> </dl> </form> </td> <td class="bg_right"></td> </tr> <!--看不見的第三行--> <tr> <td class="bg bg_end_left"></td> <td class="bg bg_end"></td> <td class="bg bg_end_right"></td> </tr> </table> </div></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
