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