javascript表单和事件课件_第1页
javascript表单和事件课件_第2页
javascript表单和事件课件_第3页
javascript表单和事件课件_第4页
javascript表单和事件课件_第5页
已阅读5页，还剩49页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第九章表单和事件处理教师：乔方辉javascript表单和事件本章目标InnerHTML的用法表单的综合验证键盘的使用本章任务演示示例2：表单的综合验证演示示例3：用户输入信息的适时提示用户输入信息的适时提示表单的综合验证制作即时提示错误的特效innerHTMLinnerHTML跟表单里面的value属性有点类似，能够控制层的显示值。比如说我一个div层里本来没有值，我触发一个事件后要显示值，那么就能够使用innerHTML属性了，其实innerHTML属性除了能控制层以外，还能控制窗口内容的所有元素

innerHTMLinnerHTML是html标签的属性，成对出现的标签都有这么个属性，是开始标签和结束标签之间的字符，不包括标签本身，innerHTML设置或获取位于对象起始和结束标签内的HTML比如<pid=“pp”>aaaaaaa<spanid=“ss”>bbbbbbbbbb</span></p>那么pp.innerHTM的内容就是：aaaaaaa<spanid=“ss”>bbbbbbbbbb</span>ss.innerHTML的内容就是：bbbbbbbbbb制作即时提示错误的特效使用DIV层的内容动态改变。

在每个输入框后添加一个DIV层,根据用户的输入,动态显示错误信息制作即时提示错误的特效演示实现步骤：1、在登录文本框后插入DIV标签loginError（即没有样式的DIV层）2、修改源代码，设置DIV的显示方式为inline，即和文本框在同一行

<divid="loginError"style="display:inline"></div>制作即时提示错误的特效

functioncheckLogin(){

varmyDiv=document.getElementById("loginError");myDiv.innerHTML="";varstrName=document.userfrm.loginName.value;if(strName.length==0){

myDiv.innerHTML="<fontcolor='red'>用户名不能为空</font>";return;}}<INPUTname="loginName"type="text"onblur="checkLogin()">如果输入的信息不合法，则利用DIV的innerHTML或innerText进行错误提示，innerText只能写文本信息获取插入的DIV对象小结2完善”密码“和”电子邮件“的错误提示功能。提示：1、密码和电子邮件文本框后各添加一个DIV标签2、修改DIV的显示样式为inline3、给各个文本框添加失去焦点onBlur的事件函数制作内容动态改变的层特效如何制作内容动态改变的特效(选择不同的计算方式)？总结：有哪些方法可以实现动态改变页面内容？方法1：当动态显示的内容较少时，使用

myDiv.innerHTML=“HTML代码”；方法2：当动态显示的内容较多，并相对固定时，则预先制作好DIV内容，然后使用myDiv.style.display=“none/block”；制作内容动态改变的层特效1、预先插入两个DIV标签，分别放置不同计算方式显示的内容：DIV1按面积计算显示的内容DIV2按贷款总额计算显示的内容<SCRIPTlanguage=JavaScript>functionInitDIV(){document.getElementById("DIV1").style.display="none";}</SCRIPT>……<BODY

onLoad="InitDIV()">制作内容动态改变的层特效2、添加函数，初始化DIV1不显示，默认按贷款总额计算：隐藏DIV1页面加载时调用functiondisplayDIV(){if(document.myform.methodRadio[0].checked==true){

document.getElementById("DIV1").style.display="block";

document.getElementById("DIV2").style.display="none";}else{

document.getElementById("DIV2").style.display="block";

document.getElementById("DIV1").style.display="none";

}}……<INPUTname="methodRadio"onClick="displayDIV()“>3、添加函数，根据“计算方式”的选择，隐藏/显示对应DIV层：根据单选按钮的值，隐藏/显示对应的层按钮的单击事件表单验证的思路-5-1表单的综合验证注意：我们点提交按钮时实际上是表单的提交。所以触发的是表单的提交事件（onSubmit）<from

action=“1.HTML"

method="post"

onSubmit="check()">

...............

</from>

发现，即使用户输入的不符合要求仍然能提交注意要注意的是，千万不能这样写写成

因为check()不通过后会返回false，

因为onsubmit属性就像是<form>这个html对象的一个方法名，默认返回true，所以还是相当于验证通过

记得对表单验证一定要写成这样

<from

action=“1.HTML"

method="post"

onSubmit=“returncheck()">

...............

</from>

语法：onSubmit=”return返回布尔型的函数”onSubmit

onSubmit返回false时，不往Server传送数据，即表单不提交如果表单没有通过验证，在函数中returnfalse就会阻止表单的提交。如果表单通过验证，在函数中returnTRUE表单就会提交。思路1、每个判断用户输入的函数，都需要有返回值，当用户输入的信息不符合要求时就返回false，符合要求时就返回true2、调用判断函数时，该在什么地方调用还是什么地方最后写一个总的函数，共onsubmit（）调用表单验证的思路-5-2<SCRIPTlanguage="JavaScript">functioncheckUserName(){//验证用户名

varfname=document.myform.txtUser.value;if(fname.length!=0){

for(i=0;i<fname.length;i++){varftext=fname.substring(i,i+1);if(ftext<9||ftext>0){alert("名字中包含数字\n"+"请删除名字中的数字和特殊字符");returnfalse}}}else{alert("请输入“名字”文本框");document.myform.txtUser.focus();returnfalse}returntrue;}……验证用户名不能包含数字获取表单元素的值表单验证的思路-5-3<SCRIPTlanguage="JavaScript">functionpassCheck(){//验证密码varuserpass=document.myform.txtPassword.value;if(userpass==""){alert("未输入密码\n"+"请输入密码");document.myform.txtPassword.focus();returnfalse;}if(userpass.length<6){alert("密码必须多于或等于6个字符。\n");returnfalse;}returntrue;}……</SCRIPT>验证密码不少于6位获取表单元素的值表单验证的思路-5-4<SCRIPTlanguage="JavaScript">……functionvalidateform(){if(checkUserName()&&passCheck())

returntrue;else

returnfalse;}</SCRIPT>……<FORMname="myform"onSubmit="returnvalidateform()“method="post"action="reg_success.htm">……<INPUTname="registerButton"type="submit"id="registerButton"value="登录">同时调用验证用户名和验证密码方法表单的提交事件触发表单提交事件为什么要这样调用函数为什么要有返回值？？小结2编写如下图所示，实现注册表单的验证功能每个文本框非空密码和再次输入的密码必须相同年份必须是20打头日期必须在1到31之间按钮正则表达式身份证号，邮箱地址，邮编等等都有一定的格式，那么来制定格式的公式就叫正则表达式。正则表达式是一门独立的课程，对于咱们不需要花时间去学习，用到时去网站上找想对应的正则表达式正则表达式正则表达式如何使用图片代替提交按钮为了美观，现把提交按钮变成图片，但仍然保持表单的验证功能？如何实现？使用图片的单击事件。onClick="checkForm()"如何使用图片代替提交按钮根据上述分析和提供的素材页面来实现表单验证。……<SCRIPTlanguage="JavaScript">functioncheckForm(){if(document.myform.txtUserName.value.length==0){ alert("用户名不能为空！");document.myform.txtUserName.focus();}}</SCRIPT>……<IMGsrc="images/regquick.jpg"onClick="checkForm()">检验是否为空单击事件，调用表单验证函数如何使用图片代替提交按钮能进行表单验证，但即使是正确填写了表单，也不能提交页面（点击“注册”没反映）。如何使用图片代替提交按钮因为图片不具备“提交”按钮的提交功能，所以需要人工调用提交方法－submit()

。<SCRIPTlanguage="JavaScript">functioncheckForm(){if(document.myform.txtUserName.value.length==0) { alert("用户名不能为空！"); document.myform.txtUserName.focus(); } else{

document.myform.submit(); }}</SCRIPT>如果表单输入合法，则提交表单如何使用图片代替提交按钮如何使用图片代替提交按钮如何使用图片代替提交按钮制作回车切换输入的效果输入完毕后回车，默认会提交表单如何制作回车Tab切换效果？制作回车切换输入的效果1、使用键盘输入事件onKeyDown事件2、检查输入是否是回车键－ASCII码13，若是则将输入改为Tab键－ASCII码9<scriptlanguage="javascript"type="text/javascript">functionchangeFocus(){if(event.keyCode==13)

event.keyCode=9;}</script>……<INPUTname="sname"type="text"class="borderBox"onKeyDown="changeFocus()">……键盘按下，调用实现Tab效果的函数修改回车键为Tab键Event事件对象包含输入键信息制作回车切换输入的效果上述注册页面中，需要给每个文本框添加键盘按下事件，有没有更简单的办法？……<INPUTname="sname"type="text"class="borderBox"onKeyDown="changeFocus()">……<INPUTname="pass"type="password"class="borderBox"id="pass"size="25"onKeyDown="changeFocus()"><INPUTname="email"type="text"class="borderBox"……id="email"size="24"onKeyDown="changeFocus()">制作回车切换输入的效果通过给document对象添加键盘事件。<script

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论