如何利用JavaScript進行表單驗證

1、資料有效行性，安全性驗證。 3層驗證。

• 1、客戶端js腳本驗證

• #2、服務端java-servlet 伺服器語言驗證

• 3、資料庫資料庫約束

2、onsubmit  表單提交事件。 form表單元素對應事件，點選提交按鈕觸發。 （type=”submit”）

• onsubmit會接收true或false回傳值。

• 返回true提交目前表單，

• #傳回false，不提交表單

• 
  
  
  
  3、String物件。
  

字串物件的方法：字串物件.方法名稱();
#常用方法：
• toLowerCase( )   將字串轉換為小寫

  toUpperCase()   將字串轉換為大寫
  charAt(index)   回傳指定位置的字元
  indexOf(字串,index)      尋找某個指定的字串中首次出現的位置

  substring(zindex1.index2)   傳回位於指定索引index1和index2之間的字串，並且包含索引index1對應的字符，不包括索引index2對應的字元
#電子郵件格式驗證：
• 1、使用getElementById()取得Email的值

  使用字串方法indexOf( ) 判斷Email的值是否包含“@”和“.”符號。

  根據函數傳回值是true還是flase來決定是否提交表單

var mail=document.getElementById("email").value;
if(mail.indexOf("@")==-1){
  alert("Email格式不正确\n必须包含@");
   return false;   
}

#2、使用String物件的length屬性驗證密碼的長度

var pwd=document.getElementById("pwd").value;
if(pwd.length<6){
      alert("密码必须等于或大于6个字符");
      return false; 
}

• #3、驗證兩次輸入密碼是否一致
  

  var repwd=document.getElementById("repwd").value;
  if(pwd!=repwd){
       alert("两次输入的密码不一致");
       return false;   
  }

  
  
  
  4、使用length屬性取得文字長度，使用for迴圈和substring()方法依序截斷單一字符，判斷每個字元是否是數字

var user=document.getElementById("user").value;
    for(var i=0;i<user.length;i++){
    var j=user.substring(i,i+1)
    if(isNaN(j)==false){
       alert("姓名中不能包含数字");
       return false;   
    }
}

• 
  
  #5 、文字方塊物件的屬性、方法和事件
  

• 事件：

     onblur  失去焦點，當遊標離開某個文字方塊時觸發

     onfocus 獲得焦點，當遊標進入某個文字方塊時觸發

  onkeypress  某個鍵盤按鍵被按下並放開

  方法：

  blur()  從文字域中移開焦點
focus() 在文字域中設定焦點，即取得滑鼠遊標
select()    選取文字網域中的內容
屬性：

• 1、清除文字方塊中初始內容，並設定邊框為紅色：

  function clearText(){
      var mail=document.getElementById("email");
      if(mail.value=="请输入正确的电子邮箱"){
      mail.value="";
      mail.style.borderColor="#ff0000";
      }
  }
  ……
      <td>Email：<input id="email" type="text"  class="inputs" value="请输入正确的电子邮箱" onfocus="clearText()"/></td>
    </tr>

2、當使用者輸入無效的電子郵件地址，Email文字方塊中的內容將自動選取並且高亮顯示，提示使用者重新輸入

if(mail.indexOf("@")==-1 || mail.indexOf(".")==-1){
    alert("Email格式不正确\n必须包含符号@和.");
    document.getElementById("email").select();
    return false;
}

3、提示Email不能為空###

function checkEmail(){
    var mail= document.getElementById ("email");
    var pID= document.getElementById ("pEmail");
    pID.innerHTML="";
    if(mail.value==""){
         pID.innerHTML="Email不能为空";
         return false;
    }
}
……
<input id="email" type="text" class="inputs"  onblur="checkEmail()"/>
<p class="red" id="pEmail"></p>

############id ​​   設定或傳回文字領域的id###########value 設定或傳回文字網域的value屬性的值############

以上是如何利用JavaScript進行表單驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！