JavaScript 表單驗證常用代碼

JavaScript 可用來在資料被送往伺服器前對 HTML 表單中的這些輸入資料進行驗證。

被 JavaScript 驗證的這些典型的表單資料有：

•使用者是否已填寫表單中的必填項目？
•使用者輸入的郵件地址是否合法？
•使用者是否已輸入合法的日期？
•使用者是否在資料域 (numeric field) 中輸入了文本？

下面是連同 HTML 表單的完整代碼：

代碼如下

複製代碼

<html> <head> <script type="text/javascript"> function validate_email(field,alerttxt) { with (field) { apos=value.indexOf("@") dotpos=value.lastIndexOf(".") if (apos<1||dotpos-apos<2)   {alert(alerttxt);return false} else {return true} } } function validate_form(thisform) { with (thisform) { if (validate_email(email,"Not a valid e-mail address!")==false)   {email.focus();return false} } } </script> </head> <body> <form action="submitpage.htm"onsubmit="return validate_form(this);" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html>

上面只是一個超簡單的郵箱驗證執行個體了，我們再看

驗證功能如下:

1.       當表單輸入元素在獲得焦點時出現資訊提示

2.       當表單輸入元素在失去焦點時進行驗證

3.       表單提交時進行整個表單的驗證.

 

驗證效果如下:

    1. 獲得焦點的狀態   
  2. 失去焦點驗證失敗的樣式  

    3. 失去焦點驗證成功的樣式

    4.   沒有輸入內容直接單擊提交按鈕時進行驗證的狀態

其中包含了兩個源檔案,一個是checkform.js檔案,一個包含了表單html檔案

裡面有幾個重點吧.不過對高手來說是小事一樁了.
1.getElementById
var obj=document.getElementById(_obj.id);
var info=document.getElementById(_obj.id+"info");
獲得驗證的表單元素,傳遞的時候使用this,接收過來的自然就是對象了.

2.Regex
  自已找合適的啦.擇日會貼些常用的與大家分享
3.info.innerHTML = "xxxx"
  向指定的結點中插入驗證狀態資訊
4.info.style.color = 'blue';
  改變指定的樣式,如果指定樣式的話就使用info.className = "";
5.傳回值的使用

JS/**//*
驗證要求：在表單的失去焦時間點事件和表單提交時進行驗證
表單說明：在表單的旁邊應有一個元素儲存提示資訊，命名為表單元素名+info,同時為驗證表單元素指定ID
函數說明：接收表單的元素名稱及表單狀態(0為獲得焦點,1為失去焦點進行驗證),將驗證的結果插入到表單旁邊的ID中
驗證過程: 1.接收傳表單元素的ID和表單狀態,並擷取值; 2.擬定Regex 3.驗證處理
          4.反饋處理結果到指定表單旁的地區中.*/
//驗證是否為空白

代碼如下

複製代碼

function isEmpty(_obj,flag){     var obj = document.getElementById(_obj.id);     var info = document.getElementById(_obj.id+"Info");     if(flag){          if(obj.value.length == 0){             showInfo(info,"該內容不可為空","red")             return false;}         else{             showInfo(info,"√","green")             return true;}     }     else{         showInfo(info,"請輸入相應表單內容！","blue")         return false;     }    } //驗證郵編,內容非必要欄位,如果填寫則進行驗證 function isPostCode(_obj,flag){     var obj = document.getElementById(_obj.id);     var info = document.getElementById(_obj.id+"Info");     var reg = /^d{6}$/;     if(flag){         if(obj.value.length>0){             if(reg.test(obj.value)==false){                 showInfo(info,"請輸入6位元字為合法的郵遞區號格式!","red")                 return false;}             else{                 showInfo(info,"√","green")                 return true;}         }         else{             showInfo(info,"郵編為可選填的內容","black")             return true;}     }     else{         showInfo(info,"郵編的格式為6位元字","blue")     } } //驗證電子郵件 //參數:Email表單元素ID,是否有必填,表單狀態 function isEmail(_obj,isempty,flag){     var obj = document.getElementById(_obj.id);     var info = document.getElementById(_obj.id+"Info");     var reg =/^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$/;     if (flag){         if(isempty){             if(obj.value == ""){                 showInfo(info,"電子郵件不可為空","red")                 return false;    }             if (reg.test(obj.value)==false){                 showInfo(info,"電子郵件格式不正確","red")                 return false;}             else{                 showInfo(info,"√","green")                 return true;}         }         else{             if (obj.value.length>0){                 if (reg.test(obj.value)==false){                     showInfo(info,"電子郵件格式不正確","red")                     return false;}                 else{                     showInfo(info,"√","green")                     return true;    }                            }             else{                     showInfo(info,"如果沒有，也可以不留！","black")                     return true;    }         }     }     else{         showInfo(info,"填寫此項以便我們與您取得聯絡","blue")    } } //電話驗證:非必填內容 function isPhone(_obj,flag){     var obj=document.getElementById(_obj.id);     var info=document.getElementById(_obj.id+"Info");     var reg=/(^[0-9]{3,4}-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^([0-9]{3,4})[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/;     if(flag){        if(obj.value.length>0){             if(reg.test(obj.value)==false){                 showInfo(info,"電話格式不正確","red")                 return false;        }             else{                 showInfo(info,"√","green")                 return true;             }                }         else{             showInfo(info,"如果方便請填寫此項！","black")             return true;         }     }     else{         showInfo(info,"如果方便請填寫此項！","blue")     } } //顯示資訊 function showInfo(_info,msg,color){     var info=_info;     info.innerHTML = msg;     info.style.color=color; }     <script language="javascript" type="text/javascript"> function checkform(frm){         var refalg=false;     var f1,f2,f3,f4,f5,f6,f7;     f1 = isEmpty(frm.title,1)     f2 = isEmpty(frm.name,1)     f3 = isEmpty(frm.addr,1)     f4 = isEmpty(frm.content,1)     f5 = isPhone(frm.tel,1)     f6 = isEmail(frm.mail,0,1)     f7 = isEmail(frm.msn,0,1)     refalg = f1 && f2 && f3 && f4 && f5 && f6 && f7 //    alert(refalg)    // return refalg;     if(refalg)     {          frm.submit();     }     else     {         alert("請檢查表單內容是否填寫完整！");     } } </script>

提交的地方: <a href="#" onclick="javascript:checkform(document.forms['form1']);">提交</a>&

10個強大的Javascript表單驗證外掛程式推薦

10個不錯的JavaScript表單驗證外掛程式，使用它們完全可以節省你的時間！希望你喜歡。

1. validate.js

 

Validate.js是一個非常不錯的JavaScript表單驗證庫，源於CodeIgniter API。該庫相當輕巧（不到1KB），不要求任何JavaScript架構，可以在所有主流瀏覽器中運行（包括IE 6）。

2. Zebra Form

 

Zebra_Form是一個免費的PHP庫，它能夠很好地處理表單驗證。你只需使用少量的PHP代碼即可設計一個安全、別緻的表單。Zebra_Form在前端整合了jQuery，用以顯示警告及錯誤提示。

3. jFormer

 

jFormer是一個基於jQuery的表單架構，允許你產生漂亮、相容標準的表單。功能包括：用戶端驗證；伺服器端驗證；Ajax提交；可通過CSS定製外觀；驗證碼支援；通用表單範本等。

4. jQuery.validVal

 

jQuery.validVal外掛程式旨在簡化表單驗證功能。此外掛程式可用於任意的HTML表單（包括Ajax非同步載入的），通過定義各種驗證規則實現表單的驗證功能。

5. Validity

 

Validity是一個強大靈活的jQuery表單架構，可實現用戶端和伺服器端同時驗證。它只有9KB大小，能夠執行各種簡單或是複雜的驗證，包括動態或設定條件的驗證。該外掛程式還可以控制驗證資訊將如何顯示，使其與網站的外觀/風格相適應。

6. ValidForm Builder

 

ValidForm Buider是一個簡單的、使用XHTML 1.0和CSS的Web表單產生工具。它是一個開源的PHP和JavaScript（jQuery）庫，非常不錯，可快速安全地製作出專業的Web驗證表單。

7. Ketchup

 

Ketchup是一個易於定製（從外觀至功能）的jQuery表單外掛程式，可用於用戶端對使用者表單進行驗證。

8. Validatious

Validatous是一個便於使用的Unobtrusive JavaScript表單驗證庫，不依賴於任何JS架構。內建數值、e-mail、URL、最大/最小字元數驗證等功能。

9. Form Validator

功能廣泛的表單驗證方案，適用於任何錶單。驗證失敗時將彈出浮動錯誤提示。

10. VanadiumJS