一、前言

大家好，我是前端進(jìn)階者。在Web項(xiàng)目開發(fā)中，經(jīng)常會在表單驗(yàn)證功能看到焦點(diǎn)事件。例如，文本框獲取焦點(diǎn)改變文本框的顏色，文本框失去焦點(diǎn)檢驗(yàn)輸入的文本框的內(nèi)容是否正確等。接下來，小編帶大家一起來實(shí)現(xiàn)一個(gè)用戶登錄的表單！

二、項(xiàng)目準(zhǔn)備

開發(fā)工具：HBuilderX

瀏覽器：Google Chrome瀏覽器

三、項(xiàng)目目標(biāo)

1.掌握焦點(diǎn)事件的使用。

2.理解獲取焦點(diǎn)和失去焦點(diǎn)知識。

3.學(xué)會運(yùn)用封裝函數(shù)。

四、項(xiàng)目實(shí)現(xiàn)

HTML

<div id="box">
<div id="img">
    <img src="img/1.jpg" />
</div>
<div id="form">
    <label>賬號：<input type="text" id="user"></label>
    <label>密碼：<input type="text" id="pwd"></label>
    <div id="btn">
    <button id="btn_ok">登錄</button>
    <button id="btn_ok">注冊</button>
    </div>
</div>
<div id="show"></div>
</div>

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

id為img主要是放置圖片；

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

id為show是用來顯示提示信息。

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)目在主軸上的對齊方式，center表示中間。

text-align屬性表示文字對齊方式。

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

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

JavaScript

1.獲取元素操作的對象

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

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

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

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表示頁面一加載就觸發(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對象中插入提示內(nèi)容。

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

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

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

效果圖如下所示:

五、總結(jié)

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

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