JavaScript程序设计基础教程（慕课版）（第2版） 实训指导-8.1 使用表单elements属性；8.2 注册表单验证.docx

实训案例名称：使用表单elements属性

1．任务介绍

使用form表单的elements属性来遍历表单中的所有元素。

2．任务目标

学会JavaScript表单elements属性的使用。

3．实现思路

form.elements[0];可获得表单中的第一个字段；

form.elements[textbox1];可获得表单中名为textbox1的字段；

form.elements.length;可获得表单中包含的字段的数量。

4．实现代码

完整代码如脚本8-1所示。

脚本8-1.html

!DOCTYPEhtml

html

head

metacharset=UTF-8

/head

body

formid=myForm

姓名:inputtype=textname=namevalue=王**br

性别:inputtype=radioname=sexvalue=男checked=true男

inputtype=radioname=sexvalue=女女br

年龄:inputtype=textname=agevalue=28br

住址:inputname=addressvalue=山东br

/form

p点击以下按钮，显示form元素中所有元素的数量/p

buttononclick=myFc()按钮/button

pid=demo/p

script

functionmyFc(){

varobj=document.getElementById(myForm).elements;

varlen=document.getElementById(myForm).elements.length;

vartmp=;

vartmp_value=;

for(vari=0;ilen;i++){

if(obj[i].hasAttribute(name)){

tmp+=obj[i].name+;

tmp_value+=obj[i].value+;

}

图8.1任务8-1运行结果}

图8.1任务8-1运行结果

document.getElementById(demo).innerHTML=form元素中有+len+个元素+br元素名称分别为：+tmp+br元素值分别为：+tmp_value;

}

/script

/body

/html

5．结果

单击按钮显示结果如图8.1所示。

实训案例名称：注册表单验证

1．案例描述

用JavaScript实现简单的注册模块表单验证。

2．实现思路

（1）首先利用html+css制作简单的注册模块界面，代码片段如下：

styletype=text/css

body{margin:0;padding:0;}

.login{position:relative;margin:100pxauto;padding:50px20px;width:350px;

height:200px;border:1pxsolid#333;}

.loginlegend{font-weight:bold;color:green;text-align:center;}

.loginlabel{display:inline-block;width:130px;text-align:right;}

.btn{height:30px;width:100px;padding:5px;border:0;background-color:#00dddd;

font-weight:bold;cursor:pointer;margin-left:140px;}

input{height:20px;width:170px;}

.borderRed{border:2pxsolidred;}

img{display:none;}

/style

/head

body

divclass=login

formname=formmethod=postaction=register.htmlonsubmit=returncheck()

legend【Register】/legend

plabelfor=nameUserName:/label

inputtype=textid=name

imgsr