網頁設計與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例21表單驗證

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

action=""

method="get"

class="register"

onsubmit="validate()">

<h1>小米用戶注冊</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="注冊"

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

validate()

{var

userID

=

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

(userID.length

<

6

||

userID.length

>

20)

{

//判斷小米ID的長度

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

//在警示對話框中顯示提示信息

return

false;

}

var

password1

=

document.getElementById('txtPwd1').value;

//獲取輸入的密碼

if

(password1.length

<

6

||

password1.length

>

10)

{

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

//在警示對話框中顯示提示信息

return

false;

}

var

password2

=

document.getElementById('txtPwd2').value;

//獲取輸入的確認密碼

if(password1!==password2){

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

return

false;

}}第2學時（相關知識點）一、變量1．變量的命名?必須以字母或下畫線開頭，中間可以是數字、字母或下畫線。?變量名不能包含空格、加號、減號等字符。?不能使用JavaScript的關鍵字，如var、int等。?JavaScript的變量名是嚴格區(qū)分大小寫的2．變量的聲明和賦值var

name;

//一次聲明一個變量var

name,gender,age;

//一次聲明多個變量var

name="李華";

//在聲明的同時初始化變量var

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

//在聲明的同時初始化全部或者部分變量二、數據類型分類類型說明基本數據類型數值型整型，用十進制數、八進制數和十六進制數來表示浮點型，使用普通形式和指數形式字符串型表示文本數據，主要由字母、數字、漢字和其他特殊字符組成，字符串型數據必須用單引號或者雙引號引起來布爾型邏輯型，布爾型數據只有兩個值，即邏輯真和邏輯假引用數據類型支持對象編程的類型對象、函數等特殊數據類型null表示空類型，當前為空值undefined未定義類型的變量，表示這個變量還沒有被賦值NaNJavaScript特有的特殊數據類型，表示“非數值”，是指程序運行時由于某種原因發(fā)生計算錯誤，產生沒有意義的數值轉義字符控制字符，它是以“\”開頭、不可顯示的特殊字符，利用轉義字符可以在字符串中添加不可顯示的特殊字符或者避免引號匹配問題例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

+

"明天會更好";

type_a

=

typeof(a);

document.write(a

+

"的類型是："

+

type_a

+

"<br

/>");

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

var

year

=

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

year

=

parseInt(year);

var

str

=

year

%

4

==

0

&&

year

%

100

!=

0

||

year

%

400

==

0;

var

result

=

str

?

"是閏年"

:

"不是閏年";

document.write(year

+

"年"

+

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

函數體；

[return表達式]}2．調用函數函數名（[參數1,參數2…]）；例<script

type="text/javascript">

function

printStr()

{

//定義函數

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

}

printStr();

//調用函數

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