今天研究了網易用戶註冊的表單,以及其及時驗證,本真人不得不說無論是它的佈局結構還是其風騷的“彈出式加載驗證”都是讓人眼前一亮,居然還可以這樣玩!…
html代碼:
<!--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>
css樣式:(style1.css)
@charset "utf-8";
/*基礎部分*/
body,dl,dt,dd,div,form{padding: 0;margin: 0;}
#header,#main{
width:650px;
margin:0 auto;
background-color: #CCE8CF;
}
/*看不見的第一行*/
/*這種風騷結構是本真人第一次見到,不得不說,讓本真人眼前一亮*/
.bg{
/*background-image: url(../img/register_logo.gif);*/
background-repeat: no-repeat;
width: 6px;
height: 6px;
}
/*表格:第一行*/
.bg_top_left{
background-position: 0px 0px;
}
.bg_top_right{
background-position: 0px -6px;
}
.bg_top{
border-top: solid 1px #666666;
}
/*表格:第三行*/
.bg_end{
border-bottom: solid 1px #666666;
}
.bg_end_left{
background-position: 0px -12px;
}
.bg_end_right{
background-position: 0px -18px;
}
/*表格:第二行*/
.bg_left{
border-left: solid 1px #666666;
}
.bg_right{
border-right: solid 1px #666666;
}
/*第二行,第二列表單內容*/
.content{
padding: 10px;
}
.inputs{
border: solid 1px #a4c8e0;
width: 150px;
height: 15px;
}
/*用戶名獨有*/
.userWidth{
width: 110px;
}
.content div{
float: left;
font-size: 12px;
color: #000;
}
dl{/*待解釋:這裏讓每個dl清浮動,像是爲了讓每個dl都相互獨立!而不被第一個左浮動所影響變成一鍋亂粥!*/
clear: both;
}
dt,dd{/*浮動飄起來*/
float: left;
}
/*將dt設置成文字右對齊,用來代替表格,造成同樣的效果,很好!*/
dt{
width: 130px;
text-align: right;
font-size: 14px;
height: 30px;
line-height: 25px;
}
dd{
font-size: 12px;
color: #666666;
width: 180px;
margin-left: 35px;
}
/*待解釋*/
/*當鼠標放到文本框時,提示文本的樣式*/
.import_prompt{
border:solid 1px #ffcd00;
background-color:#ffffda;
padding-left:5px;
padding-right:5px;
line-height:20px;
}
/*當文本框內容不符合要求時,提示文本的樣式*/
.error_prompt{
border:solid 1px #ff3300;
background-color:#fff2e5;
background-image:url(../img/li_err.png);
background-repeat:no-repeat;
background-position:5px 2px;
padding:2px 5px 0px 25px;
line-height:20px;
}
/*當文本框內容輸入正確時,提示文本的樣式*/
.ok_prompt{
border:solid 1px #01be00;
background-color:#e6fee4;
background-image:url(../img/li_ok.png);
background-repeat:no-repeat;
background-position:5px 2px;
padding:2px 5px 0px 25px;
line-height:20px;
}
JS代碼:
/*通過ID獲取HTML對象的通用方法,使用$代替函數名稱*/
function $(elementId){
//這玩意是用來模擬JQuery語法,嚇得本真人差點看不懂。
return document.getElementById(elementId);
}
/*當鼠標放在通行證用戶名文本框時,提示文本及樣式*/
function userNameFocus(){
var userNameId=$("userNameId");
/*提前在css中寫好.import_prompt這個樣式,通過className屬性居然可以給div賦值class值!本真人法力大漲啊!*/
/*之所以不在一開始就給div設置此css樣式,就是爲了要在獲取焦點時,提示它!所以說,通過這種方法,完美!*/
userNameId.className="import_prompt";
userNameId.innerHTML="1、由字母、數字、下劃線、點、減號組成<br />2、只能以數字、字母開頭或結尾,且長度爲4-18";
}
/*當鼠標離開通行證用戶名文本框時,提示文本及樣式*/
function userNameBlur(){
var userName=$("userName");
var userNameId=$("userNameId");
//這個正則表達式完美的解釋了上面的文字提示!
var reg=/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/;
//這個是用戶名爲空的情況
if(userName.value==""){
userNameId.className="error_prompt";
userNameId.innerHTML="通行證用戶名不能爲空,請輸入通行證用戶名";
return false;/*有待解釋*/
}
//這個是輸入不合法的情況
if(reg.test(userName.value)==false){
userNameId.className="import_prompt";
userNameId.innerHTML="1、由字母、數字、下劃線、點、減號組成<br />2、只能以數字、字母開頭或結尾,且長度爲4-18";
return false;
}
/*className:用的時候加載,不用的時候隱藏,這真是6的一逼啊!*/
userNameId.className="ok_prompt";
userNameId.innerHTML="通行證用戶名輸入正確";
return true;
}
/*當鼠標放在密碼文本框是,提示文本及樣式*/
function pwdFocus(){
var pwdId=$("pwdId");
pwdId.className="import_prompt";/*臥槽,一次書寫,多次調用,本真人跪了!*/
pwdId.innerHTML="密碼長度爲6-16";
}
/*當鼠標離開密碼文本框時,提示文本及樣式*/
function pwdBlur(){
var pwd=$("pwd");
var pwdId=$("pwdId");
if(pwd.value==""){
pwdId.className="error_prompt";
pwdId.innerHTML="密碼不能爲空,請輸入密碼";
return false;
}
if(pwd.value.length<6||pwd.value.length>16){
pwdId.className="error_prompt";
pwdId.innerHTML="密碼長度爲6-16";
return false;
}
pwdId.className="ok_prompt";
pwdId.innerHTML="密碼輸入正確";
return true;
}
/*當鼠標離開重複密碼文本框時,提示文本及樣式*/
function repwdBlur(){
var pwd=$("pwd");
var repwd=$("repwd");
var repwdId=$("repwdId");
if(repwd.value==""){
pwdId.className="error_prompt";
pwdId.innerHTML="重複密碼不能爲空,請重複輸入密碼";
return false;
}
if(pwd.value!=repwd.value){
repwdId.className="error_prompt";
repwdId.innerHTML="兩次輸入的密碼不一致,請重新輸入";
return false;
}
repwdId.className="ok_prompt";
repwdId.innerHTML="兩次密碼輸入正確";
return true;
}
/*當鼠標放在暱稱文本框時,提示文本及樣式*/
function nickNameFocus(){ /*這個驗證在Html部分,寫過了*/
var nickNameId=$("nickNameId");
nickNameId.className="import_prompt";
nickNameId.innerHTML="1、包含漢字、字母、數字、下劃線以及@!#$%&*特殊字符<br/>2、長度爲4-20個字符<br/>3、一個漢字佔兩個字符";
}
/*當鼠標離開暱稱文本框時,提示文本及樣式*/
function nickNameBlur(){
var nickName=$("nickName");
var nickNameId=$("nickNameId");
var k=0;
var reg=/^([\u4e00-\u9fa5]|\w|[@!#$%&*])+$/; // 匹配暱稱(與錯誤提示真tm是一模一樣!)
var chinaReg=/[\u4e00-\u9fa5]/g; //匹配中文字符
if(nickName.value==""){
nickNameId.className="error_prompt";
nickNameId.innerHTML="暱稱不能爲空,請輸入暱稱";
return false;
}
if(reg.test(nickName.value)==false){
nickNameId.className="error_prompt";
nickNameId.innerHTML="只能由漢字、字母、數字、下劃線以及@!#$%&*特殊字符組成";
return false;
}
var len=nickName.value.replace(chinaReg,"ab").length; //把中文字符轉換爲兩個字母,以計算字符長度
if(len<4||len>20){
nickNameId.className="error_prompt";
nickNameId.innerHTML="1、長度爲4-20個字符<br/>2、一個漢字佔兩個字符";
return false;
}
nickNameId.className="ok_prompt";
nickNameId.innerHTML="暱稱輸入正確";
return true;
}
/*當鼠標放在關聯手機號文本框時,提示文本及樣式*/
/*提示都是千篇一律,錯誤提示是各有不同啊!*/
function telFocus(){
var telId=$("telId");
telId.className="import_prompt";
telId.innerHTML="1、手機號碼以13,15,18開頭<br/>2、手機號碼由11位數字組成";
}
/*當鼠標離開關聯手機號文本框時,提示文本及樣式*/
function telBlur(){
var tel=$("tel");
var telId=$("telId");
//13,15,18開頭就長這德行,加上後面的任意9位,湊成11位,嘖嘖,每次看正則表達式,本真人都是醉了!
var reg=/^(13|15|18)\d{9}$/;
if(tel.value==""){
telId.className="error_prompt";
telId.innerHTML="關聯手機號碼不能爲空,請輸入關聯手機號碼";
return false;
}
if(reg.test(tel.value)==false){
telId.className="error_prompt";
telId.innerHTML="關聯手機號碼輸入不正確,請重新輸入";
return false;
}
telId.className="ok_prompt";
telId.innerHTML="關聯手機號碼輸入正確";
return true;
}
/*當鼠標放在保密郵箱文本框時,提示文本及樣式*/
/*郵箱驗證,這裏,本真人就要吐槽下了,明明H5中input的tyep類型中有email,硬是不用,非要自己寫,是嫌內存多嗎!*/
function emailFocus(){
var emailId=$("emailId");
emailId.className="import_prompt";
emailId.innerHTML="請輸入您常用的電子郵箱";
}
/*當鼠標離開保密郵箱文本框時,提示文本及樣式*/
function emailBlur(){
var email=$("email");
var emailId=$("emailId");
var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
if(email.value==""){
emailId.className="error_prompt";
emailId.innerHTML="保密郵箱不能爲空,請輸入保密郵箱";
return false;
}
if(reg.test(email.value)==false){
emailId.className="error_prompt";
emailId.innerHTML="保密郵箱格式不正確,請重新輸入";
return false;
}
emailId.className="ok_prompt";
emailId.innerHTML="保密郵箱輸入正確";
return true;
}
/*表單提交時驗證表單內容輸入的有效性*/
/*TNND,我說怎能要給上面的每個函數都加個false/true的返回值呢,原來在這等着呢,本真人剛剛看了
HTML中form標籤屬性,發現是這“<form action="" method="post" name="myform" οnsubmit="return checkForm()">”
* 其中的onsubmit方法是讓表單提交後,看看每個驗證是否都通過了,如果通過了,自然返回true,否則,只有一個是false則都不通過!而這個“return checkForm()”的
* 返回值爲false,那麼表單就不會提交成功,好傢伙!還好本真人在大學裏就見過這種驗證方式!不然,還真不一定能想明白!
* */
function checkForm(){
var flagUserName=userNameBlur();
var flagPwd=pwdBlur();
var flagRepwd=repwdBlur();
var flagNickName=nickNameBlur();
var flagTel=telBlur();
var flagEmail=emailBlur();
userNameBlur();
pwdBlur();
repwdBlur();
nickNameBlur();
telBlur();
emailBlur();
if(flagUserName==true &&flagPwd==true &&flagRepwd==true &&flagNickName==true&&flagTel==true&flagEmail==true){
return true;
}
else{
return false;
}
}