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部分

<script type="text/javascript">
function check(){
    var mail=document.getElementById("email").value;
    if(mail==""){//检测Email是否为空
        alert("Email不能为空");
        return false;
        }
    if(mail.indexOf("@")==-1){
        alert("Email格式不正确\n必须包含@");
        return false;
        }
    if(mail.indexOf(".")==-1){
        alert("Email格式不正确\n必须包含.");
        return false;
        }
        return true;
    }
</script>

6.2.3文本框内容的验证

实例：js部分

<script type="text/javascript">
function check(){
var pwd=document.getElementById("pwd").value;        
    if(pwd==""){
        alert("密码不能为空");
        return false;
        }
    if(pwd.length<6){
        alert("密码必须等于或大于6个字符");
        return false;
        }
var repwd=document.getElementById("repwd").value;        
    if(pwd!=repwd){
        alert("两次输入的密码不一致");
        return false;
        }
var user=document.getElementById("user").value;    
        if(user==""){
        alert("姓名不能为空");
        return false;
        }
    for(var i=0;i<user.length;i++){
        var j=user.substring(i,i+1);
        if(isNaN(j)==false){
            alert("姓名中不能包含数字");
            return false;
            }
        }    
        return true;
    }
</script>

6.3文本框控件

6.3.1文本框对象

文本框常用的方法和事件

事件：

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

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

方法：

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

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

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

属性：

id 设置或返回文本域的id

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

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

js部分：

<script type="text/javascript">
function check(){
    var mail=document.getElementById("email").value;
    if(mail==""){//检测Email是否为空
        alert("Email不能为空");
        document.getElementById("email").focus();
        return false;
        }
    if(mail.indexOf("@")==-1 || mail.indexOf(".")==-1){
        alert("Email格式不正确\n必须包含符号@和.");
        document.getElementById("email").focus();
        document.getElementById("email").select();
        return false;
        }
        return true;
    }
function clearText(){
    var mail=document.getElementById("email");
    if(mail.value=="请输入正确的电子邮箱"){
        mail.value="";
        mail.style.borderColor="#ff0000";
        }
    }
</script>

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

完整:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>休闲网注册页面</title>
<link href="login.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function $ (ElementID) {
        return document.getElementById(ElementID);
    }
function checkEmail(){
    var mail=$("email");
    var divID=$("DivEmail");
    divID.innerHTML="";
    if(mail.value==""){
        divID.innerHTML="Email不能为空";
        //mail.focus();
        return false;
        }
    if(mail.value.indexOf("@")==-1){
        divID.innerHTML="Email格式不正确，必须包含@";
        //mail.focus();
        return false;
        }
    if(mail.value.indexOf(".")==-1){
        divID.innerHTML="Email格式不正确，必须包含.";
        //mail.focus();
        return false;
        }
        //return true;
}
function checkPass(){
    var pwd=$("pwd");
    var divID=$("DivPwd");
    divID.innerHTML="";
    if(pwd.value==""){
        divID.innerHTML="密码不能为空";
        //pwd.focus();
        return false;
        }
    if(pwd.value.length<6){
        divID.innerHTML="密码必须等于或大于6个字符";
        //pwd.focus();
        return false;
        }
    //return true;
}
function checkRePass(){
    var pwd=$("pwd"); //输入密码
    var repwd=$("repwd"); //再次输入密码
    var divID=$("DivRepwd");   
    divID.innerHTML="";        
    if(pwd.value!=repwd.value){
        divID.innerHTML="两次输入的密码不一致";
        return false;
        }
    //return true;
}
function checkUser(){
    var user=$("user");
    var divId=$("DivUser");
    divId.innerHTML="";
    if(user.value==""){
        divId.innerHTML="姓名不能为空";
        //user.focus();
        return false;
        }
    for(var i=0;i<user.value.length;i++){
        var j=user.value.substring(i,i+1)
        if(j>=0){
            divId.innerHTML="姓名中不能包含数字";
            //user.focus();
            return false;
            }
    }
        //return true;
    }
</script>
</head>

<body>
<div id="header" class="main">
  <div id="headerLeft"><img src="images/logo.gif"/></div>
  <div id="headerRight">注册 | 登录 | 帮助</div>
</div>
<div class="main">
<table id="center" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td class="bold" colspan="2">注册休闲网</td>
  </tr>
  <form action="" method="post" name="myform"><tr>
    <td class="left">您的Email：</td>
    <td><input id="email" type="text" class="inputs" onblur="checkEmail()"/>
          <div class="red" id="DivEmail"></div></td>
  </tr>
  <tr>
  <td class="left">输入密码：</td>
    <td><input id="pwd" type="password" class="inputs" onblur="checkPass()"/>
    <div class="red" id="DivPwd"></div></td>
  </tr>
   <tr>
  <td class="left">再输入一遍密码：</td>
    <td><input id="repwd" type="password" class="inputs" onblur="checkRePass()"/>
    <div class="red" id="DivRepwd"></div></td>
  </tr>
  <tr>
  <td class="left">您的姓名：</td>
    <td><input id="user" type="text" class="inputs" onblur="checkUser()"/>
    <div class="red" id="DivUser"></div></td>
  </tr>
  <tr>
  <td class="left">性别：</td>
    <td><input name="sex" type="radio" value="1" /> 男
    <input name="sex" type="radio" value="0" /> 女</td>
  </tr>
  <tr>
  <td class="left">出生日期：</td>
    <td><select name="year">
    <script type="text/javascript">
    for(var i=1900;i<=2009;i++){
    document.write("<option value="+i+">"+i+"</option>");    
        }
    </script>
    </select>年
    <select name="month">
    <script type="text/javascript">
    for(var i=1;i<=12;i++){
    document.write("<option value="+i+">"+i+"</option>");    
        }
    </script>
    </select>月
    <select name="day">
    <script type="text/javascript">
    for(var i=1;i<=31;i++){
    document.write("<option value="+i+">"+i+"</option>");    
        }
    </script>
    </select>日</td>
  </tr>
  <tr><td> </td>
    <td ><input name="btn" type="submit" value="注册" class="rb1" /></td>
  </tr></form>
</table>

</div>
<div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a> | <a href="#">帮助中心</a></div>
</body>
</html>

附样式：

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;
    }