說實話,母版頁真是一個讓人又愛又恨的東西,為什么這么說呢?
因為我們在不使用母版頁的時候還沒有發現我們的代碼有多少問題,結果加上母版頁之后問題卻一個接著一個來,而且都是讓人感覺崩潰的。
廢話不說了,母版頁其實還是挺好的,要不我干嘛非得要知道jquery.validate如何在母版頁下進行表單驗證呢?
下面我用兩個visual studio 版本來說一下關于母版頁和jquery.validate驗證的問題
首先,visual studio 2005下
大家都知道通常母版頁的格式是這樣的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>XX系統</title> <link href="Style/Site.css" rel="stylesheet" type="text/css" /> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <div> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td rowspan="3"> <h2 class="DDMainHeader">XX系統</h2> </td> <td colspan="2"> </td> </tr> <tr> <td> <asp:Label ID="Label1" runat="server" Text="用戶名:"></asp:Label> </td> <td> <asp:Label ID="lbUserName" runat="server" ></asp:Label> </td> </tr> <tr> <td> <asp:Label ID="Label2" runat="server" Text="身份:"></asp:Label> </td> <td> <asp:Label ID="lbRole" runat="server" ></asp:Label> </td> </tr> </table> </div> <form id="form1" runat="server"> <div> <%-- TODO: 通過將 EnablePartialRendering 特性設置為“true”啟用部分呈現以提供更平穩的瀏覽體驗。 在開發應用程序的過程中,將部分呈現保持為禁用狀態可提供更好的調試體驗。 --%> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="false"/> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> </body> </html>
這里大家要注意表單form1包住<asp:ContentPlaceHolder />控件,而我們都知道內容頁就是寫在每個對應的<asp:ContentPlaceHolder />這個控件里的。所以我們會發現一個問題,就是整個被母版頁‘限制’的aspx頁其實只有一個form id,那就是這個母版頁里的form1了。
乍看一下好像沒有什么,但是大家仔細想想,如果要用到jquery.validate表單驗證的話,是不是感覺有點怪怪的呢?
因為我們都知道jquery.validate的格式是需要通過選擇器(selector)選擇要驗證的表單的form ID。然而在內容頁里我們貌似看不到對應的form id,因為它在母版頁里了,不知道有沒有朋友像我這樣想?
如果是在以前未用母版頁的時候,若有多個表單,我們可以根據不同的表單ID進行以下操作
$(document).ready(function ({
$("#form1的id").validate();
$("#form2的id").validate();
$("#form3的id").validate();
})但是現在用了母版頁,根據上面的 html中的內容,我們只能寫成
$(document).ready(function ({
$("#form1").validate();
})大家可能會想,如果這樣寫的話,是不是就要把jquery的代碼移到母版頁的<head>中呢?這樣的話它才能覆蓋到所有內容頁的html???但是又感覺這一個validate管的事情好多???它能分清不同內容頁中的所要驗證的控件嗎?
這個問題在這里我給大家解釋一下,
是這樣的,我們可以想一下,當我們運行程序的時候,在我們要驗證控件的頁面,點擊鼠標右鍵,查看源代碼,我們會發現母版頁的內容和內容頁內容連接的很好,而且我們可以看到這個頁面的form id,所以大家就可以想想,其實上面的顧慮是多余的,jquery本身就是一個前臺技術,是js 的衍生品,所以它是關注你前臺的事情,而使用母版頁的時候 ,在運行后,母版頁和內容頁就是一個獨立的頁,而這時,我們只要在當前的內容頁的<head>中插入對內容頁控件驗證的jquery.validate代碼就行。所以上面的顧慮是多余的。
就算是使用母版頁,我們還是一樣可以用以前的思想,在各自的內容頁里面加jquery.validate。
說了這么多,其實還沒有講到這跟visual studio 2005有何關系 ?
其實是這樣的,在visual studio 2005里關于母版頁有這樣的問題,就像是GridView,Reapter等控件一樣,只要包含在其中,運行的時候被包含的控件ID前面就會加上一個前綴,類似ctl100_這樣的東西,大家應該都知道,所以以前遇到這樣的事情的時候,寫前臺代碼取控件ID,都會默認加上這個前綴,但是這樣很不好,如果母版頁有改動,真是牽一發而動全身,改動量非常大。
今天了解到了一個方法個人覺得是非常好的,就是像如下這樣寫
$(document).ready(function ({
$("#<%= form1.ClientID %>").validate();
})這個方法也同樣適用于控件,就是可以直接找到它運行時的前臺真正ID。
例如:
function InitRules() {
opts = {
rules:
{
<%=txtUid.UniqueID %>:
{
required: true
},
<%=txtPwd.UniqueID %>:
{
required: true,
minlength: 6
},
<%=txtRePwd.UniqueID %>:
{
required: true,
minlength: 6,
equalTo:"#<%=txtPwd.ClientID %>"
},
<%=txtName.UniqueID %>:
{
required: true
},
<%=txtAge.UniqueID %>:
{
required: true,
number: true,
range: [1,99]
},
<%=txtEmail.UniqueID %>:
{
email: true
}
},
messages:
{
<%=txtPwd.UniqueID %>:
{
required:"不輸入用戶名你怎么登陸?"
},
<%=txtPwd.UniqueID %>:
{
required:"你不輸入密碼怎么行呢?",
minlength:"密碼太短啦至少6位"
},
<%=txtAge.UniqueID %>:
{
range:"您的年齡有問題把,得在1-99歲之間哦"
}
}
}
}但是這里我要說明一下,如果要是對表單ID使用$("#<%= form1.ClientID %>")方法獲取ID,那么這個$("#<%= form1.ClientID %>").validate();就必須放入母版頁的body中,具體為什么要這樣做,我還沒有深究,希望明白的朋友能留言解答一下。
另外還有一點是在visual studio 2005中,母版頁的默認form id是form1,如果你不去改動的話,運行之后這個form1變成 aspnetForm,所以你會看到很多時候有人這樣寫也就不奇怪了
$(document).ready(function ({
$("#aspnetForm").validate();
})下面再說visual studio 2010里的母版頁
微軟可能在這個版本已經更人性化了,它不會再自動變成aspnetForm,所以就正常使用就行。
如果是在內容頁的<head>中去加驗證,就要寫成
$(document).ready(function ({
$("#form1").validate();
})注意,這里是直接用母版頁中的form id就可以
當然如果你想使用ID.ClientID這種形式的話,就必須把
$(document).ready(function ({
$("#<%= form1.ClientID %>").validate();
})這段代碼加入到母版頁的<body>中
最后總結一下,無論在visual studio什么版本下,記住兩點,那么用jquery.validate就不會有問題。
1、如果每個表單的驗證代碼都在對應的內容頁的<head>中去寫,那么選取的form id要寫其實際運行時顯示的ID。
2、如果驗證代碼寫在母版頁中,那么最好使用<%= ID.ClientID %> 方法取表單所要驗證控件的ID,并且將其寫入<body>中。
關于這個問題如果大家還有其它情況的錯誤都可以聯系我,我們一起探討。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。