DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js進行表單驗證實例教程分析
js進行表單驗證實例教程分析
編輯：關於JavaScript     

本文實例講述了js進行表單驗證的方法。分享給大家供大家參考。具體實現方法如下：

1. 傳統的表單驗證代碼

代碼如下:<!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=utf-8" /> 
<title>表單驗證</title> 
<script type="text/javascript"> 
 
   function $(id) { 
       return document.getElementById(id); 
   } 
    
   function check() { 
       var email = $("email").value; 
       var password = $("password").value; 
       var repassword = $("repassword").value; 
       var name = $("name").value; 
        
       if(email == "") { 
           alert("Email值不能為空"); 
           $("email").focus(); 
           return false; 
       } 
        
       if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { 
           alert("郵箱格式不正確,必須包含@和."); 
           $("email").focus(); 
           return false; 
       } 
        
       if(password == "") { 
           alert("密碼不能為空"); 
           $("password").focus(); 
           return false; 
       } 
        
       if(password.length < 6) { 
           alert("密碼長度必須大於或者等於6"); 
           $("password").focus(); 
           return false; 
       } 
        
       if(repassword != password) { 
           alert("兩次輸入的密碼不一致"); 
           $("repassword").focus(); 
           return false; 
       } 
        
       if(name == "") { 
           alert("姓名不能為空"); 
           $("name").focus(); 
           return false; 
       } 
        
       for(var i = 0; i < name.length; i++) { 
           var j = name.subString(i , i+1); 
           if(isNaN(j) == false) { 
               alert('姓名中不能包含數字'); 
               $("name").focus(); 
               return false; 
           } 
       } 
   } 
</script> 
</head> 
<body> 
  <form name="login_form" method="post" onsubmit="return check()"> 
      <div> 
           Email:<input type="text" name="email" id="email"/> 
      </div>  
      <div> 
           密碼:<input type="password" name="password" id="password" /> 
      </div> 
      <div> 
          重輸密碼:<input type="password" name="repassword" id="repassword" /> 
      </div> 
      <div> 
          姓名：<input type="text" name="name" id="name" /> 
      </div> 
      <div> 
          <input type="submit" value="注冊" /> 
      </div> 
  </form> 
</body> 
</html>

2. 輸入框後面有提示信息的表單驗證

代碼如下:<!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=utf-8" /> 
<title>表單驗證</title> 
<script type="text/javascript"> 
 
   function $(id) { 
       return document.getElementById(id); 
   } 
    
   function check() { 
       var email = $("email").value; 
       var password = $("password").value; 
       var repassword = $("repassword").value; 
       var name = $("name").value; 
          
       $("emailinfo").innerHTML = ""; 
       $("passwordinfo").innerHTML = ""; 
       $("repasswordinfo").innerHTML = ""; 
       $("nameinfo").innerHTML = ""; 
        
       if(email == "") { 
          $("emailinfo").innerHTML = "Email值不能為空"; 
           $("email").focus(); 
           return false; 
       } 
        
       if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { 
           $("emailinfo").innerHTML = "郵箱格式不正確,必須包含@和."; 
           $("email").focus(); 
           return false; 
       } 
        
       if(password == "") { 
           $("passwordinfo").innerHTML = "密碼不能為空"; 
           $("password").focus(); 
           return false; 
       } 
        
       if(password.length < 6) { 
           $("passwordinfo").innerHTML = "密碼長度必須大於或者等於6"; 
           $("password").focus(); 
           return false; 
       } 
        
       if(repassword != password) { 
           $("repasswordinfo").innerHTML = "兩次輸入的密碼不一致"; 
           $("repassword").focus(); 
           return false; 
       } 
        
       if(name == "") { 
          $("nameinfo").innerHTML = "姓名不能為空"; 
           $("name").focus(); 
           return false; 
       } 
        
       for(var i = 0; i < name.length; i++) { 
           var j = name.subString(i , i+1); 
           if(isNaN(j) == false) { 
               $("nameinfo").innerHTML = '姓名中不能包含數字'; 
               $("name").focus(); 
               return false; 
           } 
       } 
   } 
</script> 
</head> 
<body> 
  <form name="login_form" method="post" onsubmit="return check()"> 
      <div> 
           Email:<input type="text" name="email" id="email"/><span id="emailinfo"></span> 
      </div>    
      <div> 
           密碼:<input type="password" name="password" id="password" /><span id="passwordinfo"></span> 
      </div> 
      <div> 
          重輸密碼:<input type="password" name="repassword" id="repassword" /><span id="repasswordinfo"></span> 
      </div> 
      <div> 
          姓名：<input type="text" name="name" id="name" /><span id="nameinfo"></span> 
      </div> 
      <div> 
          <input type="submit" value="注冊" /> 
      </div> 
  </form> 
</body> 
</html>

效果圖如下所示：

3. 在輸入框失去焦點時觸發校驗函數
代碼如下:<!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=utf-8" /> 
<title>表單驗證</title> 
<script type="text/javascript"> 
   function $(id) { 
       return document.getElementById(id); 
   } 
    
   function check() { 
       var email = $("email").value; 
       var password = $("password").value; 
       var repassword = $("repassword").value; 
       var name = $("name").value; 
          
       $("emailinfo").innerHTML = ""; 
       $("passwordinfo").innerHTML = ""; 
       $("repasswordinfo").innerHTML = ""; 
       $("nameinfo").innerHTML = ""; 
        
       if(email == "") { 
          $("emailinfo").innerHTML = "Email值不能為空"; 
           return false; 
       } 
        
       if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { 
           $("emailinfo").innerHTML = "郵箱格式不正確,必須包含@和."; 
           return false; 
       } 
        
       if(password == "") { 
           $("passwordinfo").innerHTML = "密碼不能為空"; 
           return false; 
       } 
        
       if(password.length < 6) { 
           $("passwordinfo").innerHTML = "密碼長度必須大於或者等於6"; 
           return false; 
       } 
        
       if(repassword != password) { 
           $("repasswordinfo").innerHTML = "兩次輸入的密碼不一致"; 
           return false; 
       } 
        
       if(name == "") { 
          $("nameinfo").innerHTML = "姓名不能為空"; 
           return false; 
       } 
        
       for(var i = 0; i < name.length; i++) { 
           var j = name.subString(i , i+1); 
           if(isNaN(j) == false) { 
               $("nameinfo").innerHTML = '姓名中不能包含數字'; 
               return false; 
           } 
       } 
   } 
    
   function checkEmail() {  //校驗Email 
       $('emailinfo').innerHTML = ""; 
       var email = $('email').value; 
       if(email == "") { 
            $('emailinfo').innerHTML = "Email值不能為空"; 
            return false; 
       } 
        
       if(email.indexOf('@') == -1 || email.indexOf('.') == -1) { 
            $('emailinfo').innerHTML = "Email必須包含@和."; 
            return false; 
       } 
   } 
    
   function checkPassword() {  //校驗密碼 
      $('passwordinfo').innerHTML = ""; 
      var password = $('password').value; 
      if(password == "") { 
          $("passwordinfo").innerHTML = "密碼不能為空"; 
          return false; 
      } 
    
     if(password.length < 6) { 
         $("passwordinfo").innerHTML = "密碼長度必須大於或者等於6"; 
         return false; 
      } 
   } 
    
   function checkRepassword() { //校驗重新輸入的密碼 
      $('repassword').innerHTML = ""; 
      var repassword = $('repassword').value; 
      if(repassword != password) { 
           $("repasswordinfo").innerHTML = "兩次輸入的密碼不一致"; 
           return false; 
       } 
   } 
    
   function checkName() {  //校驗姓名 
       $('nameinfo').innerHTML = ""; 
       var name = $('name').value; 
       if(name == "") { 
          $("nameinfo").innerHTML = "姓名不能為空"; 
           return false; 
       } 
        
       for(var i = 0; i < name.length; i++) { 
           var j = name.subString(i , i+1); 
           if(isNaN(j) == false) { 
               $("nameinfo").innerHTML = '姓名中不能包含數字'; 
               return false; 
           } 
       } 
   } 
</script> 
</head> 
<body> 
  <form name="login_form" method="post" onsubmit="return check()"> 
      <div> 
           Email:<input type="text" name="email" id="email" onblur="checkEmail();"/><span id="emailinfo"></span> 
      </div>    
      <div> 
           密碼:<input type="password" name="password" id="password" onblur="checkPassword();"/><span id="passwordinfo"></span> 
      </div> 
      <div> 
          重輸密碼:<input type="password" name="repassword" id="repassword" onblur="checkRepassword();"/><span id="repasswordinfo"></span> 
      </div> 
      <div> 
          姓名：<input type="text" name="name" id="name" onblur="checkName();"/><span id="nameinfo"></span> 
      </div> 
      <div> 
          <input type="submit" value="注冊" /> 
      </div> 
  </form> 
</body> 
</html>

效果圖如下所示：

希望本文所述對大家的javascript程序設計有所幫助。

關於JavaScript
javascript 禁用IE工具欄,導航欄等等實現代碼
處理問題時候遇到的,就順便記錄下, 復制代碼 代碼如下: function OnOpenWin()
通過js獲取上傳的圖片信息（臨時保存路徑，名稱，大小）然後通過ajax傳遞給後端的方法
項目需求：如何通過js獲取上傳的圖片信息（臨時保存路徑，名稱，大小）然後通過ajax傳遞給後端題主用
詳解Matlab中 sort 函數用法
(1)B=sort(A) 對一維或二維數組進行升序排序,並返回排序後的數組,當A為二維時,對數組每一

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
基於SpringMVC+Bootstrap+DataTables實現表格服務端分頁、模糊查詢 帶有定位當前位置的百度地圖前端web api實例代碼 原生JavaScript實現合並多個數組示例 原生JavaScript編寫canvas版的連連看游戲 深入理解vue.js雙向綁定的實現原理 javascript 常用功能總結 NodeJS學習筆記之MongoDB模塊 javascript匿名函數實例分析 基於javascript實現泡泡大冒險網頁版小游戲 js 動態修改css文件的方法
熱門推薦
JS實現字符串轉日期並比較大小實例分析 JS for...in 遍歷語句用法實例分析 NodeJS與Mysql的交互示例代碼 js onload事件不起作用示例分析 JS中動態添加事件(綁定事件)的代碼 JS實現橫向與豎向兩個選項卡Tab聯動的方法 text-align:justify實現文本兩端對齊 兼容IE Javascript簡單改變表單元素背景的方法 概念網站實例:所有網頁都在一個網頁裡
大家都在看
JavaScript 學習筆記之基礎中的基礎 JavaScript 學習筆記之變量及其作用域 HTML5 Canvas旋轉動畫的2個代碼例子 js中文逗號轉英文實現 jquery中常用的函數和屬性詳細解析 利用JS簡單制作的圖片的切換 ie8本地圖片上傳預覽示例代碼 js異常捕獲方法介紹
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved