说实话，母版页真是一个让人又爱又恨的东西，为什么这么说呢？
因为我们在不使用母版页的时候还没有发现我们的代码有多少问题，结果加上母版页之后问题却一个接着一个来，而且都是让人感觉崩溃的。
废话不说了，母版页其实还是挺好的，要不我干嘛非得要知道jquery.validate如何在母版页下进行表单验证呢？
下面我用两个visual studio 版本来说一下关于母版页和jquery.validate验证的问题
首先，visual studio 2005下
大家都知道通常母版页的格式是这样的
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!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"
>
<
h1
class
=
"DDMainHeader"
>XX系统</
h1
>
</
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进行以下操作
|
1
2
3
4
5
|
$(document).ready(
function
({
$(
"#form1的id"
).validate();
$(
"#form2的id"
).validate();
$(
"#form3的id"
).validate();
})
|
但是现在用了母版页，根据上面的 html中的内容，我们只能写成
|
1
2
3
|
$(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，都会默认加上这个前缀，但是这样很不好，如果母版页有改动，真是牵一发而动全身，改动量非常大。
今天了解到了一个方法个人觉得是非常好的，就是像如下这样写
|
1
2
3
|
$(document).ready(
function
({
$(
"#<%= form1.ClientID %>"
).validate();
})
|
这个方法也同样适用于控件，就是可以直接找到它运行时的前台真正ID。
例如：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
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，所以你会看到很多时候有人这样写也就不奇怪了
|
1
2
3
|
$(document).ready(
function
({
$(
"#aspnetForm"
).validate();
})
|
下面再说visual studio 2010里的母版页
微软可能在这个版本已经更人性化了，它不会再自动变成aspnetForm，所以就正常使用就行。
如果是在内容页的<head>中去加验证，就要写成
|
1
2
3
|
$(document).ready(
function
({
$(
"#form1"
).validate();
})
|
注意，这里是直接用母版页中的form id就可以
当然如果你想使用ID.ClientID这种形式的话，就必须把
|
1
2
3
|
$(document).ready(
function
({
$(
"#<%= form1.ClientID %>"
).validate();
})
|
这段代码加入到母版页的<body>中
最后总结一下，无论在visual studio什么版本下，记住两点，那么用jquery.validate就不会有问题。
1、如果每个表单的验证代码都在对应的内容页的<head>中去写，那么选取的form id要写其实际运行时显示的ID。
2、如果验证代码写在母版页中，那么最好使用<%= ID.ClientID %> 方法取表单所要验证控件的ID，并且将其写入<body>中。
关于这个问题如果大家还有其它情况的错误都可以联系我，我们一起探讨。
