最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

在上面代碼中，div的id為box相當(dāng)于一個(gè)大盒子，div的id為img、form、show為小盒子。

id為img主要是放置圖片;

id為form主要是放置表單，在里面嵌套還有一個(gè)div，它的id為btn，主要是放置登錄、注冊(cè)按鈕;

id為show是用來(lái)顯示提示信息。

CSS3

 
 
 
 

  
  
  
  
#box{ 
  
  
  
  
    margin-top: 20px; 
  
  
  
  
    width: 800px; 
  
  
  
  
    height: 400px; 
  
  
  
  
    display: flex; 
  
  
  
  
    text-align: center; 
  
  
  
  
    flex-direction: column; 
  
  
  
  
    justify-content: center; 
  
  
  
  
} 
  
  
  
  
#form{ 
  
  
  
  
    display: flex; 
  
  
  
  
    flex-direction: column; 
  
  
  
  
    justify-content: center; 
  
  
  
  
} 
  
  
  
  
#btn{ 
  
  
  
  
    display: flex; 
  
  
  
  
    text-align: center; 
  
  
  
  
    flex-direction: row; 
  
  
  
  
    justify-content: center; 
  
  
  
  
} 
  
  
  
  
#user{ 
  
  
  
  
    margin-bottom: 10px; 
  
  
  
  
} 
  
  
  
  
#btn_ok{ 
  
  
  
  
    margin-top: 10px; 
  
  
  
  
    margin-right: 20px; 
  
  
  
  
} 
  
  
  
  
#show{ 
  
  
  
  
    margin-top: 10px; 
  
  
  
  
    color: red; 
  
  
  
  
} 
 
 
 
 

在上面代碼中，#box表示大盒子的樣式，寬度和高度分別為800、400px，margin-top屬性表示上外邊距為20px，使用彈性布局display: flex;

flex-direction屬性表示控制主軸的方向，colum表示垂直方向，row表示水平方向。

justify-content屬性表示項(xiàng)目在主軸上的對(duì)齊方式，center表示中間。

text-align屬性表示文字對(duì)齊方式。

margin-bottom屬性表示設(shè)置元素的下外邊距。

margin-right屬性表示設(shè)置元素的右外邊距。

JavaScript

1.獲取元素操作的對(duì)象

 
 
 
 

  
  
  
  
function $(id){ 
  
  
  
  
    return document.getElementById(id); 
  
  
  
  
} 
 
 
 
 

在上面代碼中，$(id)函數(shù)用于根據(jù)id獲取元素。

id參數(shù)表示標(biāo)簽元素自定義的id名稱(chēng)，例如，a標(biāo)簽的id="abc"，獲取該元素對(duì)象調(diào)用$('abc')函數(shù)就可以獲取元素的對(duì)象。

2.給指定元素添加失去焦點(diǎn)事件

 
 
 
 

  
  
  
  
function addBlur(m){ 
  
  
  
  
    m.onblur=function(){ 
  
  
  
  
        isEmpty(this); 
  
  
  
  
    } 
  
  
  
  
} 
 
 
 
 

在上面代碼中，指定元素添加失去焦點(diǎn)方法是onblur方法。調(diào)用isEmpty()函數(shù)判斷表單是不是為空。

3.檢驗(yàn)指定元素失去焦點(diǎn)，它的value值是不是為空

 
 
 
 

  
  
  
  
window.onload=function(){ 
  
  
  
  
    addBlur($('user')); 
  
  
  
  
    addBlur($('pwd')); 
  
  
  
  
} 
 
 
 
 

在上面代碼中，window.onload表示頁(yè)面一加載就觸發(fā)。

檢驗(yàn)id為user和pass的元素如果失去焦點(diǎn)，它的value值是不是為空。

4.檢驗(yàn)表單是不是為空

 
 
 
 

  
  
  
  
function isEmpty(m){ 
  
  
  
  
    if(m.value===''){ 
  
  
  
  
        $('show').style.display='block'; 
  
  
  
  
        $('show').innerHTML='您輸入的內(nèi)容不能為空！'; 
  
  
  
  
    }else{ 
  
  
  
  
        $('show').style.display='none'; 
  
  
  
  
 
  
  
  
  
    } 
  
  
  
  
} 
 
 
 
 

在上面代碼中，如果表單內(nèi)容為空，向id為show對(duì)象中插入提示內(nèi)容。

5.處理登錄按鈕事件——判斷賬號(hào)和密碼是否正確

 
 
 
 

  
  
  
  
$('btn_ok').onclick=function(){ 
  
  
  
  
    if(($('user').value=='abc')&&($('pwd').value=='123')){ 
  
  
  
  
        $('show').style.display='block'; 
  
  
  
  
        $('show').innerHTML='登錄成功！'; 
  
  
  
  
    }else{ 
  
  
  
  
        $('show').style.display='block'; 
  
  
  
  
        $('show').innerHTML='賬號(hào)或密碼錯(cuò)誤！'; 
  
  
  
  
    } 
  
  
  
  
} 
 
 
 
 

在上面代碼中，處理登錄按鈕事件，判斷賬號(hào)和密碼輸入框內(nèi)容分別是否是abc、123。如果賬號(hào)和密碼輸入正確或錯(cuò)誤，向id為show對(duì)象中插入提示內(nèi)容。

效果圖如下所示:

五、總結(jié)

1.本文基于JavaScript基礎(chǔ)，實(shí)現(xiàn)用戶登錄的功能。對(duì)每一個(gè)div層進(jìn)行詳解，讓讀者更好的理解。

2.在JavaScript中首先獲取操作元素的對(duì)象，給指定元素添加失去焦點(diǎn)事件，之后，檢驗(yàn)指定元素失去焦點(diǎn)，它的value值是否為空，檢驗(yàn)表單是否為空。最后處理登錄按鈕的事件。主要是幫助大家理解焦點(diǎn)事件的知識(shí)點(diǎn)!

3.代碼沒(méi)有那么復(fù)雜，希望對(duì)你有所幫助!

標(biāo)題名稱(chēng)：淺析JavaScript的用戶登錄表單-焦點(diǎn)事件
標(biāo)題URL：http://fisionsoft.com.cn/article/cogspdh.html