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" οnblur="checkEmail()"/>
          <div class="red" id="DivEmail"></div></td>
  </tr>
  <tr>
  <td class="left">輸入密碼：</td>
    <td><input id="pwd" type="password" class="inputs" οnblur="checkPass()"/>
    <div class="red" id="DivPwd"></div></td>
  </tr>
   <tr>
  <td class="left">再輸入一遍密碼：</td>
    <td><input id="repwd" type="password" class="inputs" οnblur="checkRePass()"/>
    <div class="red" id="DivRepwd"></div></td>
  </tr>
  <tr>
  <td class="left">您的姓名：</td>
    <td><input id="user" type="text" class="inputs" οnblur="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>

附樣式：

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

accp6.0 《使用javascript增強交互效果》學習筆記ch6 表單基本驗證技術

公司新來一個幹練小夥，把 MyBatis 替換成 MyBatis-Plus，上線後哭暈在廁所。。。

w3shool學習1-PHP 語法

Network.Security.Technologies.and.Solutions(2008.3)網絡安全技術和解決方案

Play Framework Cookbook (play框架食譜...)

w3school學習3-jQuery 事件

w3shool學習2-PHP 變量

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

accp6.0 《使用javascript增強交互效果》學習筆記ch6 表單基本驗證技術

accp6.0 《使用javascript增強交互效果》學習筆記ch6 表單基本驗證技術