網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例21表單驗(yàn)證

教案21案例21表單驗(yàn)證計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)掌握J(rèn)avaScript中變量命名、聲明和賦值熟悉JavaScript中常用的數(shù)據(jù)類型掌握J(rèn)avaScript的運(yùn)算符和函數(shù)使用方法了解JavaScript的DOM(文檔對(duì)象模型)能力目標(biāo)能使用JavaScript編寫(xiě)代碼進(jìn)行表單驗(yàn)證會(huì)使用開(kāi)發(fā)者工具調(diào)試JavaScript的程序素質(zhì)目標(biāo)在編寫(xiě)代碼中遵循正確的編寫(xiě)代碼規(guī)范在編寫(xiě)代碼中培養(yǎng)認(rèn)真細(xì)致、精益求精的工匠精神教學(xué)重點(diǎn)JavaScript的基本語(yǔ)法表單驗(yàn)證的方法教學(xué)難點(diǎn)使用JavaScript獲取元素教學(xué)模式教學(xué)做一體化線上+線下混合式教學(xué)教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（案例分析實(shí)現(xiàn)）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開(kāi)討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、案例描述創(chuàng)建注冊(cè)表單，編寫(xiě)JavaScript代碼，在表單提交時(shí)進(jìn)行數(shù)據(jù)驗(yàn)證，運(yùn)行效果如圖21-1和圖21-2所示。具體要求如下。（1）在注冊(cè)表單中添加一個(gè)文本輸入框、兩個(gè)密碼輸入框和一個(gè)命令按鈕。（2）表單樣式如圖21-1所示。（3）如果小米ID和密碼輸入不符合要求或者密碼輸入和確認(rèn)密碼輸入不一致，則在單擊“注冊(cè)”按鈕時(shí)會(huì)彈出警示對(duì)話框，如圖21-2所示。圖21-1注冊(cè)表單圖21-2單擊“注冊(cè)”按鈕時(shí)對(duì)表單進(jìn)行驗(yàn)證案例分析創(chuàng)建注冊(cè)表單，使用<form>標(biāo)記定義表單，在表單中添加3個(gè)<input>標(biāo)記用于輸入小米ID和密碼，添加一個(gè)“注冊(cè)”按鈕，定義表單和控件的樣式。創(chuàng)建腳本文件，編寫(xiě)JavaScript代碼，使用document對(duì)象的getElementById()方法獲取輸入框中的數(shù)據(jù)，判斷是否滿足要求。案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體1．創(chuàng)建表單：<form

action=""

method="get"

class="register"

onsubmit="validate()">

<h1>小米用戶注冊(cè)</h1>

"required"

/>

<p><input

type="password"

id="txtPwd1"

class="pwd"

placeholder="密碼"

required="required"/></p>

<p

required="required"/></p>

<p><input

type="submit"

class="sub"

value="注冊(cè)"

/></p></form>2．定義表單的CSS樣式3．創(chuàng)建JavaScript腳本文件function

validate()

{var

userID

=

document.getElementById('txtID').value; //獲取輸入的小米IDif

(userID.length

<

6

||

userID.length

>

20)

{

//判斷小米ID的長(zhǎng)度

alert("小米ID必須為6～20個(gè)字符，請(qǐng)重新輸入！");

//在警示對(duì)話框中顯示提示信息

return

false;

}

var

password1

=

document.getElementById('txtPwd1').value;

//獲取輸入的密碼

if

(password1.length

<

6

||

password1.length

>

10)

{

alert("密碼必須為6～10個(gè)字符，請(qǐng)重新輸入！");

//在警示對(duì)話框中顯示提示信息

return

false;

}

var

password2

=

document.getElementById('txtPwd2').value;

//獲取輸入的確認(rèn)密碼

if(password1!==password2){

alert("兩次輸入密碼不一致！");

return

false;

}}第2學(xué)時(shí)（相關(guān)知識(shí)點(diǎn)）一、變量1．變量的命名?必須以字母或下畫(huà)線開(kāi)頭，中間可以是數(shù)字、字母或下畫(huà)線。?變量名不能包含空格、加號(hào)、減號(hào)等字符。?不能使用JavaScript的關(guān)鍵字，如var、int等。?JavaScript的變量名是嚴(yán)格區(qū)分大小寫(xiě)的2．變量的聲明和賦值var

name;

//一次聲明一個(gè)變量var

name,gender,age;

//一次聲明多個(gè)變量var

name="李華";

//在聲明的同時(shí)初始化變量var

name="李華",gender="男",age;

//在聲明的同時(shí)初始化全部或者部分變量二、數(shù)據(jù)類型分類類型說(shuō)明基本數(shù)據(jù)類型數(shù)值型整型，用十進(jìn)制數(shù)、八進(jìn)制數(shù)和十六進(jìn)制數(shù)來(lái)表示浮點(diǎn)型，使用普通形式和指數(shù)形式字符串型表示文本數(shù)據(jù)，主要由字母、數(shù)字、漢字和其他特殊字符組成，字符串型數(shù)據(jù)必須用單引號(hào)或者雙引號(hào)引起來(lái)布爾型邏輯型，布爾型數(shù)據(jù)只有兩個(gè)值，即邏輯真和邏輯假引用數(shù)據(jù)類型支持對(duì)象編程的類型對(duì)象、函數(shù)等特殊數(shù)據(jù)類型null表示空類型，當(dāng)前為空值undefined未定義類型的變量，表示這個(gè)變量還沒(méi)有被賦值NaNJavaScript特有的特殊數(shù)據(jù)類型，表示“非數(shù)值”，是指程序運(yùn)行時(shí)由于某種原因發(fā)生計(jì)算錯(cuò)誤，產(chǎn)生沒(méi)有意義的數(shù)值轉(zhuǎn)義字符控制字符，它是以“\”開(kāi)頭、不可顯示的特殊字符，利用轉(zhuǎn)義字符可以在字符串中添加不可顯示的特殊字符或者避免引號(hào)匹配問(wèn)題例21-1：

<script

type="text/javascript">

var

a,

type_a;

a

=

100;

type_a

=

typeof

a;

document.write(a

+

"的類型是："

+

type_a

+

"<br

/>");

a

=

true;

type_a

=

typeof

a;

document.write(a

+

"的類型是："

+

type_a

+

"<br

/>");

a

=

"hello";

type_a

=

typeof

a;

document.write(a

+

"的類型是："

+

type_a

+

"<br

/>");

a

=

null;

type_a

=

typeof

a;

document.write(a

+

"的類型是："

+

type_a

+

"<br

/>");

a

=

2023

+

"明天會(huì)更好";

type_a

=

typeof(a);

document.write(a

+

"的類型是："

+

type_a

+

"<br

/>");

</script>三、運(yùn)算符例21-2：判斷輸入的年份是否是閏年<script>

var

year

=

mpt("請(qǐng)輸入要判斷的年份");

year

=

parseInt(year);

var

str

=

year

%

4

==

0

&&

year

%

100

!=

0

||

year

%

400

==

0;

var

result

=

str

?

"是閏年"

:

"不是閏年";

document.write(year

+

"年"

+

result);</script>四、函數(shù)1．定義函數(shù)function函數(shù)名（[參數(shù)1,參數(shù)2…]）{

函數(shù)體；

[return表達(dá)式]}2．調(diào)用函數(shù)函數(shù)名（[參數(shù)1,參數(shù)2…]）；例<script

type="text/javascript">

function

printStr()

{

//定義函數(shù)

alert("茍日新，日日新。");

}

printStr();

//調(diào)用函數(shù)

</script>五、DOM簡(jiǎn)介1．DOM文檔對(duì)象模型（DocumentObjectModel，DOM）是JavaScript操作網(wǎng)頁(yè)的接口，它的作用是將網(wǎng)頁(yè)轉(zhuǎn)換為JavaScript對(duì)象，從而可以使用JavaScript對(duì)網(wǎng)頁(yè)進(jìn)行各種操作。2．獲取元素表21-2獲取元素和集合的方法分類方法說(shuō)明獲取元素document.getElementById(id)獲取指定id的頁(yè)面元素對(duì)象document.querySelector(selector);獲取指定選擇器的頁(yè)面元素對(duì)象獲取元素集合documnet.getElementsByName(name)獲取指定name屬性值的頁(yè)面元素對(duì)象集合documnet.getElementsByTagName(tag)獲取指定標(biāo)記的頁(yè)面元素對(duì)象集合documnet.getElementsByClassNam