ASP.NET Web窗体中的jQuery Validation插件
-
03-07-2019 - |
题
我真的很想在我的ASP.NET Web窗体应用程序(而不是MVC)中使用jQuery Validation插件。我觉得比在任何地方添加asp验证器更容易,并将控件设置为验证所有这些的字段。
我在设置类时遇到了一些问题,例如此类= <!>“;必需的电子邮件<!>”;我认为这与在主表单标签中使用表单标签有关。
在使用在asp控件中被破坏的名称调用jquery validate时,我也遇到了问题
// 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>
因为这个
<asp:TextBox ID="tbUsername" runat="server"></asp:TextBox>
呈现为
<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" />
并破坏了这个名字。我可以使用<%=tbUsername.ClientID %>
获取ClientID,但这不适用于ClientName
有没有人在使用asp.net的jquery验证器插件时有什么成功? 如果是这样,那么使用多个表单就像使用单独的验证组一样呢?
解决方案
您可以查看规则添加功能,但基本上这里是你能做什么:
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" />
这种方式无需担心webforms引擎生成的糟糕标识符。
其他提示
以下是使用jQuery的示例使用WebForms的验证插件和用它来模仿验证组的概念。一旦你解决了几个问题,它实际上运作得很好。
$("#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>
您可以在此处查看xVal.webForms: http://xvalwebforms.codeplex.com/
测试了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" />
最佳解决方案是使用<!>“; <!> lt;%= tbUsername.UniqueID%<!> gt; <!> quot;而不是jQuery规则中的tbUsername。
$("#signupForm").validate({
rules: {
"<%=tbUsername.UniqueID %>": {
required: true,
minlength: 2
}, },
messages: {
"<%=tbUsername.UniqueID %>": {
required: "Please enter a username",
minlength: "username at least 2 characters"
},
}.
我最近发布了一个xVal.WebForms的补丁文件,它解决了众所周知的ASP.Net验证组中的多个表单问题。此补丁还支持ASP.Net CausesValidation属性。
哟可以在这里阅读: http://cmendible.blogspot.com/
这样做的好方法是使用:
<!> lt;%= textbox.Name%<!> gt; 或 <!> lt;%= textbox.ClientId%<!> gt; 无论什么时候需要引用服务器项目。
即
var phoneNumb = $('#<%= tPhone.ClientID %>').val();
或
$("#signupForm").validate({
rules: {
<%= username.Name %>: {
required: true,
minlength: 2
}, },
messages: {
<%= username.Name %>: {
required: "Please enter a username",
minlength: "username at least 2 characters"
},
}.
.......
对于 SharePoint 2010 ,我发现加载不同的usercontrols作为视图(通过ajax),如果您将javascript移动到库中并且不能使用服务器标签作为控件ID,则可以使用此方法:
例如#<%= tPhone.ClientID %>
$('input[id$=tPhone]').rules('add',
{
required: true,
messages:
{
required: 'Some custom message for the username required field'
}
});
此外,如果您通过Ajax动态加载用户控件,则无法使用$(document).ready 你必须将jQuery封装在一个函数库中,如果它在(服务器端事件)页面的用户控件上加载它很好,但是在它通过Ajax加载的场景中,它将不会跳过。
我还没有尝试通过jQuery加载usercontrols,这看起来很重,看起来加载整个页面虽然可能稍微快一点。
比较加载技术的测试表明,更新面板速度与其他技术一样快,导致页面大小相同或更小,基本上可以快速或更快地加载更快或更多的数据。
我建议使用jQuery.simple.validator,它简单,轻量级和可自定义的验证器与asp.net Web表单兼容,因为它基本上可以在任何容器中执行验证,而不仅仅是
https://github.com/v2msoft/jquery.simple.validator
我建议你查看插件和文档。 用法:
<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
在本文中的信息我在寻找与jQuery的匹配时使用Control.ClientID ......非常有用的信息...
<label for="<%= tbName.ClientID %>">Name</label>
<input id="cphBody_tbName" runat="server" .../>