第八章 表单验证和表单提交方式.pptVIP

小结 1 编写如下图所示，实现登录表单的验证功能 * 文本框控件-1 如何实现如下图所示，完善电子邮件的例子。 * 用户单击时,邮箱的提示信息自动清除 提示电子邮件格式不对 输入的信息自动被选中并高亮显示 文本框控件-2 文本框对象的常用属性、方法、事件 名 称 说 明 属性 value 设置或获取文本框的值 方法 focus( ) 获得焦点 select( ) 选中文本内容，突出显示输入区域 事件 onFocus 光标进入某个文本框脚本运行 onBlur 文本框失去焦点脚本运行 onKeyPress 当一个键按下并释放时去触发一个事件 * 使用文本框对象的相关方法，实现选中效果 文本框控件-3 * SCRIPT LANGUAGE = JavaScript …. function clearText( ) { if (document.myform.txtEmail.value==“请输入真实的电子邮箱，我们将 发送激活密码) { document.myform.txtEmail.value= ; document.myform.txtEmail.style.color=red; } } /SCRIPT…… TD colspan=2INPUT name=txtEmail type=text class=textBorder id=txtEmail value=请输入真实的电子邮箱，我们将发送激活密码 size=40 onFocus=clearText( ) style=color: #666666; *必填/TD …… 清空文本框的内容 修改文本框的颜色 文本框获得焦点就调用方法clearText( ) 小结 2 编写如下图所示，实现注册表单的验证功能 * 每个文本框非空 密码和再次输入的密码必须相同 年份必须是20打头 日期必须在1到31之间 常见错误-1 * SCRIPT language=javascript function validateform( ){ if(sNameCheck() passCheck()bdaycheck()) return true; else return false; …… } /SCRIPT …… input type=button name=Button value= 登 录 input type=button name=Reset value= 重 填 …… 提交按钮type=submit 清空按钮type=reset 常见错误-2 * SCRIPT language=javascript function validateform( ){ if(sNameCheck() passCheck()bdaycheck()) return true; else return false; …… } /SCRIPT …… input type=button name=Button value= 登 录 onsubmit=return validateform( ) …… onsubmit不是提交按钮的事件 POST和GET的区别 Get请求发送的数据和URL在一起以明文发送，会被保留在历史记录里。 Post请求发送的数据和URL分离。 Get传送的数据量较小，不能大于2KB。 Post传送的数据量较大，一般被默认为不受限制。但理论上，因服务器的不同而异. Ajax中Post实现方式 我们在以前的课程中学习了XMLHttpRequest的 open和send方法。前面我们使用的是Get方式 提交。如果要使用Post方式提交，只需要设定 一下请求的头信息，然后把数据放到send中发 送即可。 xmlhttp.setRequestHeader(Content-Type,application/x-www-form-urlencoded); xmlHttp.send(username=dashu); 作业 注册页面的详细验证 * * ?2012 Inspur Group Inspur Education Inspur Education ?2012 Inspur Group ?2012 Inspur Group Inspur Education ?2012 Inspur Group Inspur Education ?2012 Inspur Group Inspur Education ?2012 Inspur Group Inspur Educat