jQuery官方的
Validation Plugin是個相當好用的驗証工具。做會員註冊功能時常會需要做表單驗証的功能，尤其是驗証使用者所輸入的Email。
我們通常會對Email欄位做至少以下三項驗証：
-
檢查Email輸入欄位是否有填寫
-
檢查使用者填入的Email格式是否正確
-
檢查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.詳細的教學文件可參考
官方教學網頁
