Web实验报告3文档格式.docx
《Web实验报告3文档格式.docx》由会员分享，可在线阅读，更多相关《Web实验报告3文档格式.docx（14页珍藏版）》请在冰豆网上搜索。
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<
length）
returnfalse;
returntrue;
functionmaxLength（str,length）//验证是否小于最大长度
if（str.length>
functionisDigital（str）//验证是否为数字
if（isNaN（parseInt（str）））
returntrue;
functionisNumber（str）//验证是否为整数
if（str>
='
0'
&
str<
9'
）
functionisDate（date）//验证日期是否符合格式
vardateType=/[1-9][\d]{3}-[1]?
[0-9]-[1-3]?
[0-9]/
dateType.exec（date））
functionisValidate（）//验证表单信息
obj=document.form1;
varuName=obj.uName.value;
varuPassword=obj.uPassword.value;
varuPw=obj.uPw.value;
varuBirthday=obj.uBirthday.value;
if（isNull（uName））
{
alert（"
用户名不能为空"
）;
}
elseif（!
（minLength（uName,2）&
maxLength（uName,10）））
用户名长度不符合要求"
document.getElementById（"
uName"
）.value="
"
;
if（uPw!
=uPassword）
两次密码不一致，请重新输入"
uPassword"
uPw"
（minLength（uPassword,2）&
maxLength（uPassword,8）））
密码长度不够或过长"
isDate（uBirthday））
日期格式不正确"
uBirthday"
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<
radio.length;
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;
用户名:
+uName+"
\n"
+"
口令：
+uPassword+"
生日：
+uBirthday+"
学历：
+uEducation+"
地区：
+uLocation+"
备注：
+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（"
）.focus（）;
3-2
//JavaScriptDocument
obj=document.check.value;
functionselectAll（formName,cbName）{//CheckBox全选
varcheck=document.getElementsByName（"
ch"
for（i=0;
i<
check.length;
check.item（i）.checked="
checked"
functionunSelectAll（formName,cbName）{//CheckBox取消全选
functionshowInfo（formName,cbName）//显示选中的value值
if（（check.item（i）.checked）==true）
爱好为：
+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="
functionmove（s1,s2）
varfrom=document.getElementById（s1）;
varto=document.getElementById（s2）;
from.options.length;
if（from.options[i].selected）
to.appendChild（from.options[i]）;
i=i-1;
functionmoveAll（s1,s2）//把选中的选项从s1移动到s2
to.appendChild（from.options[i]）;
i=i-1;
升级会员 