《WEB开发技术基础》课程实验指导书实验3Javascript实验指导书三
一实验目的:
学习使用网页制作工具DreamWeaver,浏览器开发Web应用,掌握使用JavaScipt进行表单信息验证和表单信息操作。
二实验内容:
编写三个html页面,实现”实验三效果.avi”中的效果。
三实验步骤:
1、创建register.html页面,该页面中显示的内容如下:
2、编写javascript代码,包括下列函数:
function isValidate()//验证表单信息,该函数中调用以下相关函数进行操作
function isNull(str)//验证是否是空
function minLength(str,length)//验证是否满足最小长度
function maxLength(str,length)//判断是否满足最大长度
function isDigital(str)//判断1个字符是否是数字
function isNumber(str)//判断是否是整数
function isDate(date)//判断是否是日期,日期的格式为1988-1-1
function validateAndSubmit()//提交按钮绑定的方法,该方法要求在form属性中进行绑定
function forwardSelectTest()//select测试按钮绑定的方法,该方法要求在javascript代码中进行绑定
3、如果用户名、口令和生日信息通过验证,则弹出提示框显示用户表单输入的信息,并且转到checkboxTest.html页面,否则重新显示本页面。
4、checkboxTest.html页面内容如下:
其中单击全选按钮,所有选项被选中,单击取消全选,所有选项都不被选中,单击显示信息按钮在一个label内显示选中项的value值
该页面JavaScript代码包括三个函数如下:
function selectAll(formName,cbName)//CheckBox全选
function unSelectAll(formName,cbName)//CheckBox取消全选
function showInfo(formName,cbName)//显示选中的value值
5、在register.html页面单击“select测试按钮”显示“selectTest.html”,该页面显示内容如下:
该页面中包括两个select组件和四个按钮,四个按钮的功能分别为:向右移动选中项,向右移动所有项,向左移动选中项,向左移动所有项
该页面JavaScript代码包括如下三个函数:
function init()///对下拉框信息进行初始化
function move(s1,s2)//把选中的选项从s1移动到s2
function moveAll(s1,s2)//把所有选项s1移动到s2
实验报告中手写提交三个页面的JavaScript代码。