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

任务五：对“翠海幼儿园”主页上的用户和密码进行非空验证
用户在“翠海幼儿园”网站首页上可以直接登录，但由于未对用户名和密码 信息的正确性进行验证，经常会造成网站发生错误，影响了网站的形象。 使用JavaScript验证输入的留言内容的非空性。
•
使用Dreamweaver编辑素材文件夹“1.5.5”中“message.Html”网页文件，编
编写javascript，完成注册页面输入项正确性的验证过程。 1) 使用客户端javascript脚本，判断用户名必须是英语字母或数字，长度6－12，如 错误则弹出提示框，提示“请输入6-12位用户名”； 2）使用客户端javascript脚本，判断电子邮件是否符合带有“@”字符，如错误则 弹出提示框，提示“请输入正确电子邮件”； 3) 单击“同意以下条款，提交注册信息”按钮后，调用“素材\images\loading.gif”，
模拟显示前，后台交互进程。
<script> function check(){ if(.value.length<6||.value.length>12){ alert("请输入6~12位用户名") } } function checkemail(){ if(form1.email.value.indexOf("@")=="-1"){ alert("请输入正确电子邮件地址")} } </script>
写JavaScript脚本函数“Checklnput()”函数，实现能够判断必填项用户名和密 码内容是否为空，为空出现提示“请正确填写！”，不为空则提示“恭喜你！”
•
为表单添加“onSubmit”事件时调用Checklnput()脚本函数，实现单击“登录” 按钮后对必填的输入验证。 <script> function CheckInput(){ if(.value== ” ”&&form1.password.value== ” ”){ alert("请正确填写！") } else{alert("恭喜你！") } } </script>

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