溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
說實話，母版頁真是一個讓人又愛又恨的東西，為什么這么說呢？
因為我們在不使用母版頁的時候還沒有發現我們的代碼有多少問題，結果加上母版頁之后問題卻一個接著一個來，而且都是讓人感覺崩潰的。
廢話不說了，母版頁其實還是挺好的，要不我干嘛非得要知道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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
