Web实验报告3文档格式.docx
《Web实验报告3文档格式.docx》由会员分享,可在线阅读,更多相关《Web实验报告3文档格式.docx(14页珍藏版)》请在冰豆网上搜索。
![Web实验报告3文档格式.docx](https://file1.bdocx.com/fileroot1/2022-11/23/4b272ffb-c3c2-4ad4-88ed-1bd34e54154b/4b272ffb-c3c2-4ad4-88ed-1bd34e54154b1.gif)
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;