《网页客户端脚本语言--JavaScript》
常州市第三中学 夏国生
一、 教学思路：
验证用户输入数据的合法性，实时给与提示和警告，只有当所有输入数据都合法才能提交给服务器。
二、 教学目标：
1.了解与体验动态HTML；
2.通过小组协作掌握客户端脚本语言javascript在表单验证中的应用；
3.学会简化代码的思路。
三、 教学准备：
多媒体电脑、用户表单网页及相关素材
四、 教学过程：
导入：出示前面已经做好的用户表单数据验证代码：
function showinfo()
{
document.getElementById("usernameinfo").style.display="block";
document.getElementById("wronginfo").style.display="none";
}
function jojo()
{
document.getElementById("password").style.display="block";
document.getElementById("wrongword").style.display="none";
}
function boki()
{
document.getElementById("repassword").style.display="block";
document.getElementById("rewrongword").style.display="none";
}
function oula()
{
document.getElementById("number").style.display="block";
document.getElementById("wrong").style.display="none";
}
<form name="userform">
<table>
<tr><td>用户名：</td><td><input type="text" name="username" onFocus="showinfo()" onBlur="hiddeninfo()">
<div id ="usernameinfo" style="float:right;display:none; ">长度控制在3-15个字节以内</div>
<div id="wronginfo" style="float:right;display:none "><font color="red">*用户名不能为空</font></div></td></tr>
<tr><td>密码：</td><td><input type="password" name="password" onFocus="jojo()" onBlur="dio()">
<div id ="password" style="float:right;display:none; ">长度控制在3-15个字节以内</div>
<div id="wrongword" style="float:right;display:none "><font color="red">*密码不能为空</font></div></td></tr>
<tr><td>确认密码：</td><td><input type="password" name="repassword" onFocus="boki()" onBlur="wry()">
<div id ="repassword" style="float:right;display:none; ">长度控制在3-15个字节以内</div>
<div id="rewrongword" style="float:right;display:none "><font color="red">*密码不能为空</font></div></td></tr>
<tr><td>手机号码：</td><td><input type="text" name="phonenumber" onFocus="oula()" onBlur="muda()">
<div id ="number" style="float:right;display:none; ">长度控制在3-15个字节以内</div>
<div id="wrong" style="float:right;display:none "><font color="red">*手机号码不能为空</font></div></td></tr>
<tr><td></td><td><input type="checkbox" name="tiaokuan">我已阅读并完全同意</td></tr>
<tr><td></td><td><input type="submit" value="立即注册" onClick="f()"></td></tr>
</table>
</form>
任务一：如何把4个onFocus后面的4个函数合并为1个函数：
function showinfo(it)
{ document.getElementById({域名已经过期}+"info").style.display="block";}
<form name="userform">
<table>
<tr><td>用户名：</td><td><input type="text" name="username" onFocus="showinfo(this)">
<div id ="usernameinfo" style="float:right;display:none; ">长度控制在3-15个字节以内</div></td></tr>
</table>
</form>
任务二：如何把4个onBlur后面的4个函数合并为1个函数：
function hiddeninfo(it)
{ document.getElementById("wrong"+{域名已经过期}).style.display="block";}
<form name="userform">
<table>
<tr><td>用户名：</td><td><input type="text" name="username" onBlur="hiddeninfo(this)">
<div id ="wrongusername" style="float:right;display:none; ">用户不能为空</div></td></tr>
</table>
</form>
总结：
一个好的网页，要能丰富和突出他所要表达的主题，需要用不同的方法和技术增添效果，但是如果不加思考，胡乱使用技术，则喧宾夺主，作用相反。所以今天这节课的学习，希望能给同学们在今后的主题网站（页）学习时提供一个基础和帮助。
评课记录：
万江：课堂上学生动起来了，课堂气氛活跃起来了，小组讨论、合作探究的学习方式也用起来了。
姚雪娟：教师能面向全体学生，激发学生的深层思考和情感投入，鼓励学生大胆质疑、独立思考，引导学生用自己的语言阐明自己的观点和想法。
石红：教学是教师与学生交往互动的过程。教师能有意识地营造民主、平等、和谐的课堂氛围。
教学反思：
如何把动态HTML呈现给学生，我选择以一个用户表单数据验证，从易到难，通过一个个输入控件的数据合法性验证，提升学生信息处理的能力与素养。不足的是因为学情认识不够，本人在课堂环节的分配过程没有把握好，在活动任务的设置方面应该还有更好的方法和例子，需要在教学实际当中不断观察与改进。
关闭窗口
打印文档