网页设计与制作案例教程（HTML5 CSS3 JavaScript）（微课版）（第2版） 教案 案例21表单验证

教案21案例21表单验证计划学时2学时知识目标掌握JavaScript中变量命名、声明和赋值熟悉JavaScript中常用的数据类型掌握JavaScript的运算符和函数使用方法了解JavaScript的DOM(文档对象模型)能力目标能使用JavaScript编写代码进行表单验证会使用开发者工具调试JavaScript的程序素质目标在编写代码中遵循正确的编写代码规范在编写代码中培养认真细致、精益求精的工匠精神教学重点JavaScript的基本语法表单验证的方法教学难点使用JavaScript获取元素教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（案例分析实现）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述创建注册表单，编写JavaScript代码，在表单提交时进行数据验证，运行效果如图21-1和图21-2所示。具体要求如下。（1）在注册表单中添加一个文本输入框、两个密码输入框和一个命令按钮。（2）表单样式如图21-1所示。（3）如果小米ID和密码输入不符合要求或者密码输入和确认密码输入不一致，则在单击“注册”按钮时会弹出警示对话框，如图21-2所示。图21-1注册表单图21-2单击“注册”按钮时对表单进行验证案例分析创建注册表单，使用<form>标记定义表单，在表单中添加3个<input>标记用于输入小米ID和密码，添加一个“注册”按钮，定义表单和控件的样式。创建脚本文件，编写JavaScript代码，使用document对象的getElementById()方法获取输入框中的数据，判断是否满足要求。案例实现学生同步操作，做学教一体1．创建表单：<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．创建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的变量名是严格区分大小写的2．变量的声明和赋值var

name;

//一次声明一个变量var

name,gender,age;

//一次声明多个变量var

name="李华";

//在声明的同时初始化变量var

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

//在声明的同时初始化全部或者部分变量二、数据类型分类类型说明基本数据类型数值型整型，用十进制数、八进制数和十六进制数来表示浮点型，使用普通形式和指数形式字符串型表示文本数据，主要由字母、数字、汉字和其他特殊字符组成，字符串型数据必须用单引号或者双引号引起来布尔型逻辑型，布尔型数据只有两个值，即逻辑真和逻辑假引用数据类型支持对象编程的类型对象、函数等特殊数据类型null表示空类型，当前为空值undefined未定义类型的变量，表示这个变量还没有被赋值NaNJavaScript特有的特殊数据类型，表示“非数值”，是指程序运行时由于某种原因发生计算错误，产生没有意义的数值转义字符控制字符，它是以“\”开头、不可显示的特殊字符，利用转义字符可以在字符串中添加不可显示的特殊字符或者避免引号匹配问题例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