JavaScript 表單驗證常用代碼

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

提交的地方: <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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More