温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Asp.net 母版页情况下如何进行jquery.validate验证

发布时间:2020-07-10 03:09:03 来源:网络 阅读:1510 作者:我不会抽烟 栏目:编程语言

说实话,母版页真是一个让人又爱又恨的东西,为什么这么说呢?

因为我们在不使用母版页的时候还没有发现我们的代码有多少问题,结果加上母版页之后问题却一个接着一个来,而且都是让人感觉崩溃的。

废话不说了,母版页其实还是挺好的,要不我干嘛非得要知道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>中。



关于这个问题如果大家还有其它情况的错误都可以联系我,我们一起探讨。


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI