javascript 的表單 email 驗證流程

首先表單的送出鍵,預設值為關閉的,也就是無法按。

<input id="sendButton" type="submit" value="送出表單" disabled="true" />

然後在 javascript 中,在宣告一個全域變數 CheckResultEmail 的值為 n
然後建立一個空白的 check_form() 函數
然後設定網頁讀取後,每 1 秒執行一次 check_form() 函數
最後回來設計 check_form() 函數

var CheckResultEmail = "n";

function check_form()
{
    var email    = document.getElementById("mail").value;

    if(email != "")
    {
        re = /^.+@.+..{2,3}$/;
        if (re.test(email))
        {
            CheckResultEmail = "y";
            document.getElementById("email_error").innerHTML = "";
        }
        else
        {
            CheckResultEmail = "n";
            document.getElementById("email_error").innerHTML = "x";
        }
    }
    else
    {
        CheckResultEmail = "n";
    }
    if(CheckResultEmail == "y")
    {
        document.getElementById("sendButton").disabled = false;
    }
    else
    {
        document.getElementById("sendButton").disabled = true;
    }
}
window.onload = setInterval('check_form()',1000);

設計 check_form() 函數的目的是,如果 email 欄位有填寫,並通過正規式檢查,將全域變數 CheckResultEmail 改為 y
若 CheckResultEmail 為 n,則在 email 欄位後的 span 標示為 x

<span id="email_error"></span>

由於 check_form() 函數的最後會檢查 CheckResultEmail 的值,若為 y ,則打開表單送出鍵。