Asp.net 母版頁情況下如何進行jquery.validate驗證

說實話，母版頁真是一個讓人又愛又恨的東西，為什麼這麼說呢？

因為我們在不使用母版頁的時候還沒有發現我們的代碼有多少問題，結果加上母版頁之後問題卻一個接着一個來，而且都是讓人感覺崩潰的。

廢話不說了，母版頁其實還是挺好的，要不我幹嘛非得要知道jquery.validate如何在母版頁下進行表單驗證呢？

下面我用兩個visual studio 版本來說一下關于母版頁和jquery.validate驗證的問題

首先，visual studio 2005下

大家都知道通常母版頁的格式是這樣的

<code><</code><code>html</code> <code>xmlns</code><code>=</code><code>"http://www.w3.org/1999/xhtml"</code><code>></code>

<code><</code><code>head</code> <code>runat</code><code>=</code><code>"server"</code><code>></code>

<code><</code><code>title</code><code>>XX系統</</code><code>title</code><code>></code>

<code><</code><code>link</code> <code>href</code><code>=</code><code>"Style/Site.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>type</code><code>=</code><code>"text/css"</code> <code>/></code>

<code><</code><code>asp:ContentPlaceHolder</code> <code>id</code><code>=</code><code>"head"</code> <code>runat</code><code>=</code><code>"server"</code><code>></code>

<code></</code><code>asp:ContentPlaceHolder</code><code>></code>

<code><</code><code>table</code> <code>border</code><code>=</code><code>"0"</code> <code>cellspacing</code><code>=</code><code>"0"</code> <code>cellpadding</code><code>=</code><code>"0"</code> <code>width</code><code>=</code><code>"100%"</code><code>></code>

<code><</code><code>td</code> <code>rowspan</code><code>=</code><code>"3"</code><code>></code>

<code><</code><code>h1</code> <code>class</code><code>=</code><code>"DDMainHeader"</code><code>>XX系統</</code><code>h1</code><code>></code>

<code><</code><code>td</code> <code>colspan</code><code>=</code><code>"2"</code><code>></code>

<code><</code><code>asp:Label</code> <code>ID</code><code>=</code><code>"Label1"</code> <code>runat</code><code>=</code><code>"server"</code> <code>Text</code><code>=</code><code>"使用者名:"</code><code>></</code><code>asp:Label</code><code>></code>

<code><</code><code>asp:Label</code> <code>ID</code><code>=</code><code>"lbUserName"</code> <code>runat</code><code>=</code><code>"server"</code> <code>></</code><code>asp:Label</code><code>></code>

<code><</code><code>asp:Label</code> <code>ID</code><code>=</code><code>"Label2"</code> <code>runat</code><code>=</code><code>"server"</code> <code>Text</code><code>=</code><code>"身份:"</code><code>></</code><code>asp:Label</code><code>></code>

<code><</code><code>asp:Label</code> <code>ID</code><code>=</code><code>"lbRole"</code> <code>runat</code><code>=</code><code>"server"</code> <code>></</code><code>asp:Label</code><code>></code>

<code></</code><code>table</code><code>></code>

<code><</code><code>form</code> <code>id</code><code>=</code><code>"form1"</code> <code>runat</code><code>=</code><code>"server"</code><code>></code>

<code>在開發應用程式的過程中，将部分呈現保持為禁用狀态可提供更好的調試體驗。 --%></code>

<code><</code><code>asp:ScriptManager</code> <code>ID</code><code>=</code><code>"ScriptManager1"</code> <code>runat</code><code>=</code><code>"server"</code> <code>EnablePartialRendering</code><code>=</code><code>"false"</code><code>/></code>

<code><</code><code>asp:ContentPlaceHolder</code> <code>id</code><code>=</code><code>"ContentPlaceHolder1"</code> <code>runat</code><code>=</code><code>"server"</code><code>></code>

這裡大家要注意表單form1包住<asp:ContentPlaceHolder />控件，而我們都知道内容頁就是寫在每個對應的<asp:ContentPlaceHolder />這個控件裡的。是以我們會發現一個問題，就是整個被母版頁‘限制’的aspx頁其實隻有一個form id，那就是這個母版頁裡的form1了。

乍看一下好像沒有什麼，但是大家仔細想想，如果要用到jquery.validate表單驗證的話，是不是感覺有點怪怪的呢？

因為我們都知道jquery.validate的格式是需要通過選擇器（selector）選擇要驗證的表單的form ID。然而在内容頁裡我們貌似看不到對應的form id，因為它在母版頁裡了，不知道有沒有朋友像我這樣想？

如果是在以前未用母版頁的時候，若有多個表單，我們可以根據不同的表單ID進行以下操作

<code>$(document).ready(</code><code>function</code> <code>({</code>

<code>$(</code><code>"#form1的id"</code><code>).validate();</code>

<code>$(</code><code>"#form2的id"</code><code>).validate();</code>

<code>$(</code><code>"#form3的id"</code><code>).validate();</code>

但是現在用了母版頁，根據上面的 html中的内容，我們隻能寫成

<code>$(</code><code>"#form1"</code><code>).validate();</code>

大家可能會想，如果這樣寫的話，是不是就要把jquery的代碼移到母版頁的<head>中呢？這樣的話它才能覆寫到所有内容頁的html啊？但是又感覺這一個validate管的事情好多啊？它能厘清不同内容頁中的所要驗證的控件嗎？

這個問題在這裡我給大家解釋一下，

是這樣的，我們可以想一下，當我們運作程式的時候，在我們要驗證控件的頁面，點選滑鼠右鍵，檢視源代碼，我們會發現母版頁的内容和内容頁内容連接配接的很好，而且我們可以看到這個頁面的form id，是以大家就可以想想，其實上面的顧慮是多餘的，jquery本身就是一個前台技術，是js 的衍生品，是以它是關注你前台的事情，而使用母版頁的時候，在運作後，母版頁和内容頁就是一個獨立的頁，而這時，我們隻要在目前的内容頁的<head>中插入對内容頁控件驗證的jquery.validate代碼就行。是以上面的顧慮是多餘的。

就算是使用母版頁，我們還是一樣可以用以前的思想，在各自的内容頁裡面加jquery.validate。

說了這麼多，其實還沒有講到這跟visual studio 2005有何關系？

其實是這樣的，在visual studio 2005裡關于母版頁有這樣的問題，就像是GridView，Reapter等控件一樣，隻要包含在其中，運作的時候被包含的控件ID前面就會加上一個字首，類似ctl100_這樣的東西，大家應該都知道，是以以前遇到這樣的事情的時候，寫前台代碼取控件ID，都會預設加上這個字首，但是這樣很不好，如果母版頁有改動，真是牽一發而動全身，改動量非常大。

今天了解到了一個方法個人覺得是非常好的，就是像如下這樣寫

<code>$(</code><code>"#<%= form1.ClientID %>"</code><code>).validate();</code>

這個方法也同樣适用于控件，就是可以直接找到它運作時的前台真正ID。

例如：

<code>function</code> <code>InitRules() {</code>

<code> </code><code>rules:</code>

<code> </code><code>required: </code><code>true</code>

<code> </code><code>required: </code><code>true</code><code>,</code>

<code> </code><code>minlength: 6</code>

<code> </code><code>minlength: 6,</code>

<code> </code><code>equalTo:</code><code>"#<%=txtPwd.ClientID %>"</code>

<code> </code><code>number: </code><code>true</code><code>,</code>

<code> </code><code>range: [1,99]</code>

<code> </code><code>email: </code><code>true</code>

<code> </code><code>messages:</code>

<code> </code><code>required:</code><code>"不輸入使用者名你怎麼登陸?"</code>

<code> </code><code>required:</code><code>"你不輸入密碼怎麼行呢?"</code><code>,</code>

<code> </code><code>minlength:</code><code>"密碼太短啦至少6位"</code>

<code> </code><code>range:</code><code>"您的年齡有問題把,得在1-99歲之間哦"</code>

但是這裡我要說明一下，如果要是對表單ID使用$("#<%= form1.ClientID %>")方法擷取ID，那麼這個$("#<%= form1.ClientID %>").validate();就必須放入母版頁的body中，具體為什麼要這樣做，我還沒有深究，希望明白的朋友能留言解答一下。

另外還有一點是在visual studio 2005中，母版頁的預設form id是form1，如果你不去改動的話，運作之後這個form1變成 aspnetForm，是以你會看到很多時候有人這樣寫也就不奇怪了

<code>$(</code><code>"#aspnetForm"</code><code>).validate();</code>

下面再說visual studio 2010裡的母版頁

微軟可能在這個版本已經更人性化了，它不會再自動變成aspnetForm，是以就正常使用就行。

如果是在内容頁的<head>中去加驗證，就要寫成

注意，這裡是直接用母版頁中的form id就可以

當然如果你想使用ID.ClientID這種形式的話，就必須把

這段代碼加入到母版頁的<body>中

最後總結一下，無論在visual studio什麼版本下，記住兩點，那麼用jquery.validate就不會有問題。

1、如果每個表單的驗證代碼都在對應的内容頁的<head>中去寫，那麼選取的form id要寫其實際運作時顯示的ID。

2、如果驗證代碼寫在母版頁中，那麼最好使用<%= ID.ClientID %> 方法取表單所要驗證控件的ID，并且将其寫入<body>中。

關于這個問題如果大家還有其它情況的錯誤都可以聯系我，我們一起探讨。

本文轉自我不會抽煙 51CTO部落格，原文連結：http://blog.51cto.com/zhouhongyu1989/1390128，如需轉載請自行聯系原作者

Asp.net 母版頁情況下如何進行jquery.validate驗證

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條