项目五设置完成并检验网页动态效果

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,网页制作,Dreamweaver CS3,项目五：设置,完成并检验网页动态效果,知识与技能,掌握网页脚本程序的调试和排错的方法；,能使用网页脚本语言进行网页表单输入的验证,；,在对表单输入项验证之前，必须要先检查表单，确定表单的名称，确定验证表单项的名称。以便在验证代码中调用。,任务,一,：,对论坛注册页面的输入项的正确性进行,验证,编写,javascript,，完成注册页面输入项正确性的验证过程。,1),使用客户端,javascript,脚本，判断用户名必须是英语字母或数字，长度,6,12,，如错误则弹出提示框，提示“请输入,6-12,位用户名”；,2,）使用客户端,javascript,脚本，判断电子邮件是否符合带有“,”字符，如错误则弹出提示框，提示“请输入正确电子邮件”；,3),单击“同意以下条款，提交注册信息”按钮后，调用“素材,imagesloading.gif,”，模拟显示前，后台交互进程。,function check(),if(form1.name.value.length12),alert(,请输入,612,位用户名,),function checkemail(),if(form1.email.value.indexOf()=-1),alert(,请输入正确电子邮件地址,),任务,一,：,操作详解,1、,选中整个表格，剪切，插入表单，光标定位到表单内，粘贴表格。,2,、选中输入“用户名”的文本域，修改文本框名称为,name,。选中输入“电子邮件地址”的文本域，修改文本框名称为,email,。,3,、切换到“代码”视图，光标定位到,后面按回车。输入,验证,代码,（见上页所附）。,4,、光标定位到“检查会员名是否可用”表单按钮的代码后，输入：,onclick=check(),光标定位到,同意以下条款，提交注册信息,表单按钮的代码后，输入：,onclick=checkemail(),5,、将光标定位到表单定义,action=”,，如下图所示，在属性面板的动作框内点击文件夹按钮，选择,imagesloading.gif,。,任务,二,：,对“凝玉轩”留言板的必填项进行验证,编写,JacaSpcript,，完成留言板页面输入项正确性的验证过程。,1,）使用,Dreamweaver,编辑“,message.html,”网页文件，编写,JavaScript,脚本函数“,CheackInput,（）”，实现：能够判断表单带“,*,”符号的必填项“您的大名”内容是否为空，为空出现提示“请正确填入！”，不为空则提示“恭喜您！”,2,）为表单添加“,onSubmit,”事件时调用编写的“,CheckInput,（）”脚本函数，实现单击“提交留言”按钮后对必填项的输入验证。,function CheckInput(),if(form1.name.value=”),alert(,请正确填入！,),elsealert(,恭喜您！,),4,、）光标定位到“提交留言”表单按钮的代码后，输入：,onSubmit=CheckInput(),任务,三,：,对“神话”主页上的用户登录项进行验证,编写,JavaScript,验证脚本函数，实现对“神话”主页上的用户登录项的验证。,函数名,check,。,实现单击“,LOGIN,”图片（即“,images/808.Jpg),后，判断输入的用户名和密码是否为“,admin,”,如不是则弹出提示对话框显示“用户名或密码错误”。,如是则弹出提示对话框显示“欢迎光临”。,设置表单“,onSubmit,”事件是调写编写的,JavaScript,函数，实现提交时的验证。,function Check(),if(form1.login_name.value=”admin”&form1.login_pass.value=”admin”),alert(,欢迎光临！,),elsealert(,用户名或密码错误！,),任务,四,：,对“莘莘学子”留言板的留言内容进行非空性验证,“莘莘学子”网站的留言板模块经常会有人发空布信息，给网站管理带来不便，需要对用户的留言做一些验证。,使用,JavaScript,验证输入的留言内容的非空性。,使用,Dreamweaver,编辑“,message.html,”网页文件，创建,JavaScript,脚本函数“,Checklnput(),”函数，实现能够判断必填项“您的姓名”内容是否为空，为空出现提示“请正确填写！”，不为空则提示“恭喜你！”,为表单添加“,onSubmit,”事件时调用,Checklnput(),脚本函数，实现单击“提交内容”按钮后对必填的输入验证。,function CheckInput(),if(form1.name.value=”),alert(,请正确填写！,),elsealert(,恭喜你！,),任务,五,：,对“翠海幼儿园”主页上的用户和密码进行非空验证,用户在“翠海幼儿园”网站首页上可以直接登录，但由于未对用户名和密码信息的正确性进行验证，经常会造成网站发生错误，影响了网站的形象。,使用,JavaScript,验证输入的留言内容的非空性。,使用,Dreamweaver,编辑素材文件夹“,1.5.5,”中“,message.Html,”网页文件，编写,JavaScript,脚本函数“,Checklnput(),”函数，实现能够判断必填项用户名和密码内容是否为空，为空出现提示“请正确填写！”，不为空则提示“恭喜你！”,为表单添加“,onSubmit,”事件时调用,Checklnput(),脚本函数，实现单击“登录”按钮后对必填的输入验证。,function CheckInput(),if(form1.name.value=”&form1.password.value=”),alert(,请正确填写！,),elsealert(,恭喜你！,),