ASP.NET Web 窗体中的 jQuery 验证插件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/619816/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Validation plugin in ASP.NET Web Forms
提问by eiu165
I would really like use the jQuery Validation plugin in my ASP.NET Web Forms application (not MVC). I find it easier than adding asp validators everywhere and setting the control to validate field on all of them.
我真的很想在我的 ASP.NET Web 窗体应用程序（不是 MVC）中使用 jQuery 验证插件。我发现这比在任何地方添加 asp 验证器并设置控件来验证所有这些验证器更容易。
I am just having some issues both when setting the class like this class="required email" which I think has something to do with having a form tag within the main form tag.
我只是在设置像这个 class="required email" 这样的类时遇到一些问题，我认为这与在主表单标签中包含一个表单标签有关。
I also run into issues when calling the jquery validate using the names which become mangled in an asp control
在使用在 asp 控件中损坏的名称调用 jquery 验证时，我也遇到了问题
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
username: {
required: true,
minlength: 2
}, },
messages: {
username: {
required: "Please enter a username",
minlength: "username at least 2 characters"
},
}.
.......
<p>
<label for="username">
Username</label>
<input id="username" name="username" />
</p>
because this
因为这
<asp:TextBox ID="tbUsername" runat="server"></asp:TextBox>
renders as
呈现为
<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" />
and mangles the name. I can get the ClientID using <%=tbUsername.ClientID %>but that doesn't work with ClientName
并破坏名称。我可以使用 ClientID，<%=tbUsername.ClientID %>但这不适用于 ClientName
Has anyone had any success using the jquery validator plugin with asp.net? If so what about using multiple forms much like using separate validation groups?
有没有人在 asp.net 中使用 jquery 验证器插件取得过任何成功？如果是这样，如何使用多个表单，就像使用单独的验证组一样？
回答by Darin Dimitrov
You can checkout the rules add function, but basically here's what you can do:
您可以查看规则 add function，但基本上您可以执行以下操作：
jQuery(function() {
// You can specify some validation options here but not rules and messages
jQuery('form').validate();
// Add a custom class to your name mangled input and add rules like this
jQuery('.username').rules('add', {
required: true,
messages: {
required: 'Some custom message for the username required field'
}
});
});
<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" class="username" />
This way no need to worry about the crappy identifiers generated by the webforms engine.
这样就无需担心 webforms 引擎生成的蹩脚标识符。
回答by Dave Ward
Here are examples of using the jQuery Validation plugin with WebFormsand emulating the concept of validation groupswith it. It actually works pretty well once you smooth out a couple issues.
以下是将 jQuery 验证插件与 WebForms 一起使用并用它模拟验证组概念的示例。一旦您解决了几个问题，它实际上效果很好。
回答by 1984kg
$("#signupForm").validate({
rules: {
<%= tbUsername.UniqueID %>: {
required: true,
minlength: 2
}, },
messages: {
<%= tbUsername.UniqueID %>: {
required: "Please enter a username",
minlength: "username at least 2 characters"
},
});
<asp:TextBox ID="tbUsername" runat="server"></asp:TextBox>
回答by Carlos Mendible
You can check xVal.webForms here: http://xvalwebforms.codeplex.com/
您可以在此处查看 xVal.webForms：http://xvalwebforms.codeplex.com/
回答by C.Hoffmann
Tested what Darin Dimitrov said and it works perfectly, but if you don't want to set a specific class to each of your fields, you can use jQuery selectors:
测试了 Darin Dimitrov 所说的，它工作得很好，但如果你不想为每个字段设置一个特定的类，你可以使用 jQuery 选择器：
$('form').validate();
$('input[id$=Username]').rules('add', {
required: true,
messages: {
required: 'Some custom message for the username required field'
}
});
<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" />
回答by Hymanie
The best solution is use "<%=tbUsername.UniqueID %>" instead of tbUsername in jQuery rules.
最好的解决方案是在 jQuery 规则中使用 "<%=tbUsername.UniqueID %>" 而不是 tbUsername。
$("#signupForm").validate({
rules: {
"<%=tbUsername.UniqueID %>": {
required: true,
minlength: 2
}, },
messages: {
"<%=tbUsername.UniqueID %>": {
required: "Please enter a username",
minlength: "username at least 2 characters"
},
}.
回答by Christian
I recommend using jQuery.simple.validator, its easy, lightweigh and customizable validator compatible with asp.net web forms, because basically it can perform validations in any container, not only
我推荐使用 jQuery.simple.validator，它简单、轻量且可定制的验证器与 asp.net web 表单兼容，因为基本上它可以在任何容器中执行验证，而不仅仅是
https://github.com/v2msoft/jquery.simple.validator
https://github.com/v2msoft/jquery.simple.validator
I recommend you check the plugin and the documentation. Usage:
我建议您检查插件和文档。用法：
<script type="text/javascript" src="/Content/js/jquery-plugins/jquery.simple.validator.js"></script>
<div id="container">
<!-- REQUIRED FIELD -->
<label>Required Field: </label><br/>
<input type="text" id="required_field_control" data-required data-required-msg="Field is required" /><br /><br/>
<input type="button" value="Validate" onclick='javascript:validate();' />
</div>
<script type="text/javascript">
function validate() {
$("#container").initialize();
var ok = $("#container").validate();
if (!ok) alert("There are errors");
else alert("Form is ok");
}
</script
回答by Dscoduc
The information in this articleled me to use Control.ClientID when looking for a match with jQuery... Very useful information...
这篇文章中的信息让我在寻找与 jQuery 匹配的时候使用了 Control.ClientID...非常有用的信息...
<label for="<%= tbName.ClientID %>">Name</label>
<input id="cphBody_tbName" runat="server" .../>
回答by jason robertson
For SharePoint 2010I found with loading different usercontrols as views (via ajax) that this worked if you move javascript into a library and can't use server tags for the control id's like this:
对于SharePoint 2010，我发现将不同的用户控件作为视图（通过 ajax）加载，如果您将 javascript 移动到库中并且不能像这样使用服务器标记作为控件 ID，这会起作用：
e.g #<%= tPhone.ClientID %>
例如 #<%= tPhone.ClientID %>
$('input[id$=tPhone]').rules('add',
{
required: true,
messages:
{
required: 'Some custom message for the username required field'
}
});
Further to this if you dynamically load a user control via Ajax then you cannot use $(document).ready You will have to encapsulate the jQuery in a function library if its on the User Control at (server side event) page load its fine but in the scenario its loaded via Ajax with the Update Panel it will not dance.
此外，如果您通过 Ajax 动态加载用户控件，则不能使用 $(document).ready 如果它在（服务器端事件）页面的用户控件上加载正常，则必须将 jQuery 封装在函数库中在它通过 Ajax 加载的场景中，它不会跳舞。
I have not tried loading usercontrols via jQuery yet, this looks heavy and appears to load the whole page albeit perhaps slightly quicker or not.
我还没有尝试通过 jQuery 加载用户控件，这看起来很重，似乎加载了整个页面，尽管可能稍微快一点。
Tests comparing loading techniques showed the Update Panel was as fast and resulted in the same or smaller page sizes than other techniques and basically loaded quicker or much more data as quick or quicker.
比较加载技术的测试表明，更新面板与其他技术一样快，并导致页面大小相同或更小，并且基本上加载速度更快或更多数据。
回答by Adam
A great way to do this is to use:
一个很好的方法是使用：
<%= textbox.Name %>or <%= textbox.ClientId %>whenever you need to reference a server item.
<%= textbox.Name %>或<%= textbox.ClientId %>每当您需要引用服务器项时。
i.e.
IE
var phoneNumb = $('#<%= tPhone.ClientID %>').val();
or
或者
$("#signupForm").validate({
rules: {
<%= username.Name %>: {
required: true,
minlength: 2
}, },
messages: {
<%= username.Name %>: {
required: "Please enter a username",
minlength: "username at least 2 characters"
},
}.
.......
......
