css基本的表单验证技术

《css基本的表单验证技术》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第五章基本的表单验证技术回顾简述制作样式特效的大致步骤。简述制作改变按钮背景图片特效的大致步骤。简述层的显示/隐藏特效的实现思路。简述图片的显示/隐藏特效的的实现思路。本章任务演示示例1：具有验证功能的登录页面演示示例2：具有验证功能的注册页面制作具有验证功能的登录页面制作具有验证功能的注册页面本章目标会使用DOM模型的层次关系访问元素会使用表单事件和脚本函数实现表单验证会使用String对象和文本框控件常用属性和方法实现客户端验证为什么需要表单验证服务器IE脚本在客户端执行，减轻服务器端的压力客户端用户输入客户端用户输入……客户端用户输入……发送请求返回响应发送

2、请求返回响应发送请求返回响应表单验证的内容-1不能为空且不能有数字不能为空且不能有数字不能为空，且只能包括字母、数字和下划线字符密码不能为空并且最少为6位，还要求两次输入的密码要一致表单验证的内容-2不能为空且包含字符@和.只能二选一年月日不能为空，且不能超出其要求的范围表单验证的思路-1如何编写脚本验证表单？1、获取表单元素的值（String类型），然后进行判断2、触发表单（FORM）的提交事件（onSubmit）表单验证的思路-2常用的String对象使用var语句varnewstr="这是我的字符串"创建String对象varnewstr=newString

3、("这是我的字符串“)调用方法和属性字符串对象.属性名字符串对象.方法名()表单验证的思路-3名称说明属性length获取字符串字符的个数方法indexOf(“子字符串”，起始位置)查找子字符串的位置charAt(index)获取位于指定索引位置的字符substring(index1,index2)求子串toLowerCase()将字符串转换成小写toUpperCase()将字符串转换成大写String对象常用的属性和方法语法：indexOf(“查找的子字符串”，查找的起始位置)返回子字符串所在的位置；如果没找到，返回－1例如：varxvary=“abcdefg”

4、;x=y.indexOf(“c”,0);//返回结果为2，起始位置是0表单验证的思路-4查看完整代码检查电子邮件email是否包含“@”和”.”functioncheckEmail(){varstrEmail=document.myform.txtEmail.value;if(strEmail.length==0){alert("电子邮件不能为空!");returnfalse;}if(strEmail.indexOf("@",0)==-1){alert("电子邮件格式不正确必须包含@符号！");retu

5、rnfalse;}if(strEmail.indexOf(".",0)==-1){alert("电子邮件格式不正确必须包含.符号！");returnfalse;}returntrue;}………………返回结果-1表示没找到“@”字符获取表单

6、元素的值表单的提交事件表单验证的思路-5-1查看完整代码表单验证的思路-5-2查看完整代码functioncheckUserName(){//验证用户名varfname=document.myform.txtUser.value;if(fname.length!=0){for(i=0;i0){alert("名字中包含数字"+"请删除名字中的数字和特殊字符");retu

7、rnfalse}}}else{alert("请输入“名字”文本框");document.myform.txtUser.focus();returnfalse}returntrue;}……验证用户名不能包含数字获取表单元素的值表单验证的思路-5-3查看完整代码……functionpassCheck(){//验证密码varuserpass=document.myform.txtPassword.value;if(userpass==""){alert("未输入密码"+"请输入密码");document.my

8、form.