03HTML交互与表单验证资料.ppt

HTML交互与表单验证 本章目标 表单验证方式 表单验证基本方法 表单验证提示效果 表单提交的意义 Web应用的日益广泛主要得益于用户与服务器通过网络可以更方便的交互以及高效的管理、存储用户的数据，其中作为数据交互载体的表单form功不可没，它担负着将用户信息运送到服务器端的重任。 Jsp Asp PHP HTML form Form是最重要的Web应用提交手段,所有数据量大，安全性要求高的数据必须使用Form提交 请求 浏览器端验证 目前几乎所有的Web应用都具有浏览器端数据验证功能，浏览器端验证的主要手段是使用Javascript+加CSS和HTML的部分特性实现对数据的有效性，合法性检测！ 服务器端验证 对数据安全性要求较高的应用都会使用此种验证方式，在安全性方面有着浏览器端验证不可比拟的优势，但在验证效率方面不及浏览器端来的高效和便捷。通常使用两种结合的方式做数据效验 表单验证方式 浏览器端验证 JavaScript最主要的用途之一就是在浏览器端做表单验证 对于检查用户输入是否存在错误和是否疏漏了必选项，JavaScript 是一种十分便捷的方法 输入校验的时机 使用onSubmit事件 form action= method= name=reg_form onSubmit=return validate() …... /form 注：当使用onSubmit事件调用JS验证方法时，需要加return 命令，同时验证方法必须返回false才能够阻止表单的提交。 案例： 错误用法：onsubmit=“validate()” 正确用法：onsubmit=“return validate()” 失去焦点时验证 …… input type=text name=uname onblur=checkName() …… 查找表单输入组件 通过表单查找 …… form name=“inputForm …… input type=“text” name=“uname” …… …… 查找文本输入框： script type=“text/javascript” …… var txtname = document.inputForm.uname; 或 var txtname = document.form[0].uname; /script 执行表单校验或其他JavaScript动作的首要任务是查找到目标组件，其次是获取/设置组件的属性、调用组件的方法。 查找表单输入组件 通过DOM查找 …… form …… input type=“text” name=“username” id=“txtname” …… …… 查找文本输入框： script type=“text/javascript” …… var txtname = document.getElementById(“txtname”); /script 注意：要确保在整个HTML页面中id值的唯一性，例如在上例中要确保在整个页面中再没有其他的组件的id值为“txtname” 表单验证 script type=“text/javascript function validate( ){ var f=document.reg_form; if(f.uname.value==){ alert(请输入姓名); f.uname.focus(); return false; } if((f.password.value.length 6) || (f.password.value == )){ alert(请输入至少 6 个字符的密码！); f.password.select(); return false; } if(f.age.value1 || f.age.value 99 || isNaN(f.age.value)){ alert(请输入有效的年龄！); f.age.focus(); return false; } 检查姓名 检查年龄 检查密码 表单验证 if (f.gender[0].checked==false f.gender[1].checked==false){ alert(请指定性别); f.gender[0].focus(); return false; } q=f.email.value.indexOf(@); if (q == -1){ alert(请输入有效的电子邮件地址); f.email.focus(); return false; } return true; } /script 检查邮件地址 检查性别 特定表单元素的验证 //得到爱好多选框数组 var favCk=docume