以jQuery驗証Email

jQuery官方的Validation Plugin是個相當好用的驗証工具。做會員註冊功能時常會需要做表單驗証的功能，尤其是驗証使用者所輸入的Email。
我們通常會對Email欄位做至少以下三項驗証：

1. 檢查Email輸入欄位是否有填寫
2. 檢查使用者填入的Email格式是否正確
3. 檢查Email是否已被註冊過

透過Validation plugin，我們可以輕鬆地達到以上驗証。

1.加入jQuery及Validation plugin

<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>

2.在畫面上放置一個TextBox及Button

<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox_Email" runat="server"></asp:TextBox>
    </div>
    <asp:Button ID="Button_Submit" runat="server" Text="送出" />
</form>

3.加入"檢查Email輸入欄位是否有填寫"功能

<script language="javascript" type="text/javascript"> 
    $(function() { 
        $("#<%= this.Form.ClientID %>").validate({ 
            rules: { 
            <%= this.TextBox_Email.UniqueID %>: { required: true} 
            }, 
            messages:{ 
            <%= this.TextBox_Email.UniqueID %>: { required: "請輸入Email"} 
            } 
        }); 
    }); 
</script>

在不輸入資料時按送出鈕後我們可以看到以下畫面

4.加入"檢查使用者填入的Email格式是否正確"功能

<script language="javascript" type="text/javascript">
    $(function() {
        $("#<%= this.Form.ClientID %>").validate({
            rules: {
            <%= this.TextBox_Email.UniqueID %>: { required: true, email: true}
            },
            messages:{
            <%= this.TextBox_Email.UniqueID %>: { required: "請輸入Email", email: "Email格式不正確"}
            }
        });
    });
</script>

我們可以輸入格式不正確的Email，可以看到以下畫面

5.加入"檢查Email是否已被註冊過"功能

Client端

<script language="javascript" type="text/javascript">
    $(function() {
        $("#<%= this.Form.ClientID %>").validate({
            rules: {
            <%= this.TextBox_Email.UniqueID %>: {
                required: true,
                email: true,
                remote: {
                    url: "Default.aspx",
                    type: "get",
                    data: {
                        email: function(){return $("#<%= this.TextBox_Email.UniqueID %>").val();}
                    }
                }}
            },
            messages: {
            <%= this.TextBox_Email.UniqueID %>: {
                required: "請輸入Email",
                email: "Email格式不正確",
                remote: "Email已被註冊"
                }
            }
        });
    });
</script>

Server端

        protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.HttpMethod == "GET")
            {
                string email = Request.QueryString["email"];

                if (string.IsNullOrEmpty(email))
                {
                    return;
                }

                //IsEmailRegistered為true表示Email已被註冊，並回傳"false"表示未通過驗証
                Response.Write(IsEmailRegistered(email) ? "false" : "true");
                Response.End();
            }
        }

        private bool IsEmailRegistered(string email)
        {
            return true;
        }

當我們把IsEmailRegistered設為true時，在畫面上按送出鈕會看到以下畫面

備註
1.經測試，使用<%= this.TextBox_Email.UniqueID %>在有MasterPage的頁面中才能正常驗証表單
2.詳細的教學文件可參考官方教學網頁