文档详情

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

发布:2025-04-26约1.2万字共11页下载文档
文本预览下载声明

实训案例名称:使用表单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

显示全部
相似文档