accp6.0 《使用javascript增强交互效果》学习笔记ch6 表单基本验证技术

由来：表单作为客户端向服务器提交数据的主要载体，为保证提交数据是合法的，以及减少服务器压力，表单验证是很有必要的。

6.1表单验证的内容：

常用的有:

1.非空验证

2.是否为数字

3.邮件地址是否合法

4.数据是否在某个范围内

5.输入的信息长度是否足够

6.特定的数据是否有效，比如出生日期

6.2表单验证的思路

1.获取表单元素的值

2.使用js中的一些方法对获取的数据进行判断

3.表单form有一个事件onsubmit,它是在提交表单之前调用的，因此可以在提交表单时触发onsubmit事件，然后对获取的数据进行验证。

6.2.1 String 对象 

1.字符串对象的属性

语法：

字符串对象.length;

var str="hello world"

var strLength=str.length;

最后strLength返回的str字符串长度是11。

2.字符串对象的方法

语法

字符串对象.方法名();

String对象常用方法：

toLowerCase() 把字符串转化为小写

toUpperCase() 把字符串转化为大写

charAt(index)返回指定位置的字符

indexOf(字符串,index) 查找某个指定的字符串在字符串中首次出现的位置

substring(index1,index2) 返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符串，不包括索引index2对应的字符

6.2.2电子邮件格式的验证

实例：js部分

6.2.3文本框内容的验证

实例：js部分

6.3文本框控件

6.3.1文本框对象

文本框常用的方法和事件

事件：

onblur 失去焦点，当光标离开某个文本框时触发
onfocus获得焦点，当光标进入某个文本框时触发

onkeypress某个键盘按键被按下并松开

方法：

blur() 在文本域中移开焦点

focus() 在文本域中设置焦点，即获得鼠标光标

select()选取文本域中的内容

属性：

id 设置或返回文本域的id

value设置或返回文本域的value属性的值

实例：动态改变文本框效果

js部分：

示例4：制作文本输入提示特效             

完整:

  

  
注册 | 登录 | 帮助



    

    
注册休闲网
  
  

    
您的Email：
    

          

  
  

  
输入密码：
    

    

  
   

  
再输入一遍密码：
    

    

  
  

  
您的姓名：
    

    

  
  

  
性别：
    
 男
     女
  
  

  
出生日期：
    

    
    年
    
    
    月
    
    
    日
  
  
 
    

  



关于我们 | 诚聘英才 | 联系方式 | 帮助中心

附样式：

login.css

@charset "gb2312";
/* CSS Document */

*{padding:0; margin:0;}
body{
    font-size:13px;
    color:#000;
    line-height:25px;
     }
.main{
    float:none;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    clear:both;
}
#header{
    background-image: url(images/bg.gif);
    background-repeat: repeat-x;
    height: 36px;
    }
#headerLeft{width:200px;
           float:left;
           }
#headerRight{width:160px;
             float:right;
             color:#FFF;
             }
#center{
    margin-top: 5px;
    margin-right: auto;
    margin-bottom: 5px;
    margin-left: auto;
    width:100%;

    }
.left{width:25%;
      text-align:right;
      height:25px;
      }

.bg{
    background-image: url(images/dl_l_bg.gif);
    background-repeat: repeat-y;
    }
.inputs{width:130px;
height:16px;
border:solid 1px #666666;
float:left;

}
.bold{
    font-size:18px;
    font-weight:bold;
    text-align:center;
    line-height:35px;
    height:35px;
}
.rb1{
    height:20x;
    color:#fff;
    font-size:13px;
    background:#d32c47;
    padding:3px 10px;
    border-left:1px solid #fff;
    border-top:1px solid #fff;
    border-right:1px solid #6a6a6a;
    border-bottom:1px solid #6a6a6a;
    cursor:pointer;
    }
#footer{text-align:center;
color:#333;
line-height:35px;
}
#footer a{
    color:#333;
    text-decoration:underline;
}
#footer hover{
    color:#333;
    text-decoration:none;
}
.red{
    color:#F00;
    float:left;
    padding-left:5px;
    }