Web实验报告3.docx

Web实验报告3.docx

《Web实验报告3.docx》由会员分享，可在线阅读，更多相关《Web实验报告3.docx（14页珍藏版）》请在冰豆网上搜索。

Web实验报告3

课程名称

Web前端开发技术

班级

计算121

实验日期

2015.4.23

姓名

潘洪菊

学号

201207003

实验成绩

实验名称

实验3JavaScript脚本语言篇

实验目的及要求

学习使用网页制作工具DreamWeaver，浏览器开发Web应用，掌握使用JavaScipt进行表单信息验证和表单信息操作。

实

验

环

境

操作系统：

Win732位

开发环境：

Dreamweaver

实验

内容

编写三个html页面，实现”实验三效果.avi”中的效果。

1、实验步骤：

创建register.html页面，该页面中显示的内容如下：

2、编写javascript代码，包括下列函数：

functionisValidate（）//验证表单信息，该函数中调用以下相关函数进行操作

functionisNull（str）//验证是否是空

functionminLength（str,length）//验证是否满足最小长度

functionmaxLength（str,length）//判断是否满足最大长度

functionisDigital（str）//判断1个字符是否是数字

functionisNumber（str）//判断是否是整数

functionisDate（date）//判断是否是日期，日期的格式为1988-1-1

functionvalidateAndSubmit（）//提交按钮绑定的方法，该方法要求在form属性中进行绑定

functionforwardSelectTest（）//select测试按钮绑定的方法，该方法要求在javascript代码中进行绑定

3、如果用户名、口令和生日信息通过验证，则弹出提示框显示用户表单输入的信息，并且转到checkboxTest.html页面，否则重新显示本页面。

4、checkboxTest.html页面内容如下：

其中单击全选按钮，所有选项被选中，单击取消全选，所有选项都不被选中，单击显示信息按钮在一个label内显示选中项的value值

该页面JavaScript代码包括三个函数如下：

functionselectAll（formName,cbName）//CheckBox全选

functionunSelectAll（formName,cbName）//CheckBox取消全选

functionshowInfo（formName,cbName）//显示选中的value值

5、在register.html页面单击“select测试按钮”显示“selectTest.html”，该页面显示内容如下：

该页面中包括两个select组件和四个按钮，四个按钮的功能分别为：

向右移动选中项，向右移动所有项，向左移动选中项，向左移动所有项

该页面JavaScript代码包括如下三个函数：

functioninit（）///对下拉框信息进行初始化

functionmove（s1,s2）//把选中的选项从s1移动到s2

functionmoveAll（s1,s2）//把所有选项s1移动到s2

调

试

过

程

及

实

验

结

果

1.注册界面

用户名是否为空的验证

用户名长度是否符合的验证

密码与重置密码是否一致以及是否符合设置长度的验证

对生日日期格式的验证，看是否符合所设置的日期格式

验证通过之后弹出的用户所输入的信息

2.跳转到另一个界面checkboxTest.html后，按显示按钮所显示的信息

全选按钮显示效果

取消全选按钮显示效果

3.注册界面regesiter.html中按下select按钮所显示的效果

向右移动所选项

向右移动所有项

向左移动所选项

向左移动所有项

总

结

在实验过程中，加深了对Javascript的理解，知道了如何在HTML中使用JS，加深了对使用JS创造表单的熟练性，并且了解了select两个组件之间移动的方法。

附

录

functionisNull（str）//验证是否为空

{

if（!

str）

returntrue;

else

returnfalse;

}

functionminLength（str,length）//验证是否满足最小长度

{

if（str.length

returnfalse;

else

returntrue;

}

functionmaxLength（str,length）//验证是否小于最大长度

{

if（str.length>length）

returnfalse;

else

returntrue;

}

functionisDigital（str）//验证是否为数字

{

if（isNaN（parseInt（str）））

returnfalse;

else

returntrue;

}

functionisNumber（str）//验证是否为整数

{

if（str>='0'&&str<='9'）

returntrue;

else

returnfalse;

}

functionisDate（date）//验证日期是否符合格式

{

vardateType=/[1-9][\d]{3}-[1]?

[0-9]-[1-3]?

[0-9]/

if（!

dateType.exec（date））

returnfalse;

else

returntrue;

}

functionisValidate（）//验证表单信息

{

obj=document.form1;

varuName=obj.uName.value;

varuPassword=obj.uPassword.value;

varuPw=obj.uPw.value;

varuBirthday=obj.uBirthday.value;

if（isNull（uName））

{

alert（"用户名不能为空"）;

returnfalse;

}

elseif（!

（minLength（uName,2）&&maxLength（uName,10）））

{

alert（"用户名长度不符合要求"）;

document.getElementById（"uName"）.value="";

returnfalse;

}

if（uPw!

=uPassword）

{

alert（"两次密码不一致，请重新输入"）;

document.getElementById（"uPassword"）.value="";

document.getElementById（"uPw"）.value="";

returnfalse;

}

elseif（!

（minLength（uPassword,2）&&maxLength（uPassword,8）））

{

alert（"密码长度不够或过长"）;

document.getElementById（"uPassword"）.value="";

document.getElementById（"uPw"）.value="";

returnfalse;

}

if（!

isDate（uBirthday））

{

alert（"日期格式不正确"）;

document.getElementById（"uBirthday"）.value="";

returnfalse;

}

returntrue;

}

functionvalidateAndSubmit（）//提交按钮绑定的方法，该方法要求在form属性中进行绑定

{

if（isValidate（））

{

obj=document.form1;

varuName=obj.uName.value;

varuPassword=obj.uPassword.value;

varuPw=obj.uPw.value;

varuBirthday=obj.uBirthday.value;

varradio=document.getElementsByName（"uEducation"）;

varuEducation=null;

for（vari=0;i

{

if（radio[i].checked==true）

{

uEducation=radio[i].value;

break;

}

}

index=obj.uLocation.selectedIndex;

varuLocation=obj.uLocation.options[index].text;

varbeizhu=obj.beizhu.value;

alert（"用户名:

"+uName+"\n"+"口令：

"+uPassword+"\n"+"生日：

"+uBirthday+"\n"+"学历：

"+uEducation+"\n"+"地区：

"+uLocation+"\n"+"备注：

"+beizhu）;

window.location.href="checkboxTest.html";

window.event.returnValue=false;

}

}

functionformwardSelectTest（）{//select测试按钮绑定该方法，该方法要求在javascipt代码中进行绑定

/*document.getElementById（'#text'）.addEventListener（'onclick',function（）{

alert（"Text"）;

},false）*/

window.location.href="selectTest.html";

}

functionsetFocus（）{

document.getElementById（"uName"）.focus（）;

}

3-2

//JavaScriptDocument

obj=document.check.value;

functionselectAll（formName,cbName）{//CheckBox全选

varcheck=document.getElementsByName（"ch"）;

for（i=0;i

{

check.item（i）.checked="checked";

}

}

functionunSelectAll（formName,cbName）{//CheckBox取消全选

varcheck=document.getElementsByName（"ch"）;

for（i=0;i

{

check.item（i）.checked="";

}

}

functionshowInfo（formName,cbName）//显示选中的value值

{

varcheck=document.getElementsByName（"ch"）;

for（i=0;i

{

if（（check.item（i）.checked）==true）

alert（"爱好为：

"+check[i].value）;

}

}

3-3

window.onload=functioninit（）//对下拉框信息进行初始化

{

varobj=document.getElementById（"select1"）;

varobj2=document.getElementById（"select2"）;

obj.size=10;

obj.style.width="140px";

obj2.size=10;

obj2.style.width="140px";

}

functionmove（s1,s2）

{

varfrom=document.getElementById（s1）;

varto=document.getElementById（s2）;

for（vari=0;i

{

if（from.options[i].selected）

{

to.appendChild（from.options[i]）;

i=i-1;

}

}

}

functionmoveAll（s1,s2）//把选中的选项从s1移动到s2

{

varfrom=document.getElementById（s1）;

varto=document.getElementById（s2）;

for（vari=0;i

{

to.appendChild（from.options[i]）;

i=i-1;

}

}