表单验证的相关件事和辅助特效.pptx

第6章上机　 表单验证的相关事件和辅助特效 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 相关回顾 怎样使用图片代替提交按钮，并实现表单提交？ 怎样判断键盘按下的键值？ 怎样实现回车切换输入效果？ 怎样实现内容动态显示的层特效？ Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 上机目标 制作具有提交功能的图片按钮 制作回车的tab切换效果 制作内容动态显示的层特效 讲解 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 训练技能点 能够制作带提示文字的输入框 能够制作回车切换输入的效果 能够制作内容动态显示的层特效 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 讲解需求说明 带提示文字的文本框，获得焦点时内容自动清空 使用图片代替提交按钮 阶段1 训练要点： 图片代替提交按钮 带提示文字的文本框 需求说明： 本阶段只验证QQ号码输入是否为空 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 　　讲解实现思路和关键代码 完成时间：10分钟 参考代码 阶段1 实现思路和关键代码： 图片代替提交按钮，图片添加onClick事件 表单提交：document.myform.submit( ) 有文字提示的文本框：设置文本框的初始值，添加onFocus事件，在事件中将value值清空。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 阶段2 需求说明： 在阶段1的基础上增加确认密码和验证码的检查 设置带有文字提示的验证码文本框 人工添加代码提交表单 参考代码 完成时间：15分钟 提示文字的文本框 图片代替按钮实现提交 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 共性问题集中讲解 阶段2 常见调试问题及解决办法 代码规范问题 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 训练要点： onKeydown键盘事件 innerHtml和innerText改变显示内容 需求说明： 键盘回车实现tab键切换输入的效果 文本框失去焦点，提示错误信息 讲解需求说明 初始页面获得焦点 按下回车键，用户名框失去焦点，密码框获得焦点 即时错误提示信息 密码框获得焦点 阶段3 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 　　讲解实现思路和关键代码 完成时间：15分钟 参考代码 阶段3 实现思路和关键代码： 获取键盘事件的键值event.keyCode 判断对应控件的类型event.srcElement.type 错误信息提示层的设置DIV id=“… style=display:inline 使用innerHTML动态改变信息提示内容 Evaluation only. Created with Aspose.Slides fo