45

我真的很想在我的 ASP.NET Web 窗体应用程序（不是 MVC）中使用 jQuery 验证插件。我发现它比到处添加 asp 验证器并设置控件来验证所有这些验证器更容易。

我只是在设置此类时遇到了一些问题 class="required email" 我认为这与主表单标签中的表单标签有关。

在使用在 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" />

并破坏名称。我可以使用 ClientID 获取，<%=tbUsername.ClientID %>但这不适用于 ClientName

有没有人使用带有 asp.net 的 jquery 验证器插件取得任何成功？如果是这样，那么使用多个表单就像使用单独的验证组一样呢？

4

11 回答 11

47

您可以检查规则添加功能，但基本上这是您可以执行的操作：

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 引擎生成的蹩脚的标识符。

于 2009-03-06T18:39:30.420 回答
11

以下是使用带有 WebForms 的 jQuery Validation 插件并用它模拟验证组概念的示例。一旦你解决了几个问题，它实际上工作得很好。

于 2010-02-11T05:18:31.333 回答
11 
$("#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>
于 2010-08-27T08:22:36.987 回答
4

您可以在此处查看 xVal.webForms：http: //xvalwebforms.codeplex.com/

于 2009-10-21T11:11:17.103 回答
2

测试了 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" />
于 2010-05-27T18:14:03.803 回答
2

最好的解决方案是在 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"
    }, 
}.
于 2012-10-02T04:30:35.767 回答
0

我最近为 xVal.WebForms 发布了一个补丁文件，它解决了在著名的 ASP.Net 验证组上中继的多表单问题。此补丁还支持 ASP.Net CausesValidation 属性。

哟可以在这里阅读： http: //cmendible.blogspot.com/

于 2009-10-28T15:34:45.467 回答
0

一个很好的方法是使用：

<%= textbox.Name %>或<%= textbox.ClientId %>每当您需要引用服务器项时。

IE

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"
                }, 
        }.

…………

于 2010-07-23T02:50:49.257 回答
0

对于SharePoint 2010，我发现将不同的用户控件加载为视图（通过 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 加载用户控件，这看起来很重，并且似乎加载了整个页面，尽管可能稍微快一点或没有。

比较加载技术的测试表明，更新面板的速度与其他技术一样快，并且页面大小相同或更小，并且基本上加载更快或更快或更快速地加载更多数据。

于 2011-08-10T22:03:40.290 回答
0

我推荐使用 jQuery.simple.validator，它简单、轻量且可定制的验证器与 asp.net 网络表单兼容，因为它基本上可以在任何容器中执行验证，不仅

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
于 2016-05-17T15:31:08.973 回答
0

本文中的信息引导我在使用 jQuery 查找匹配项时使用 Control.ClientID... 非常有用的信息...

<label for="<%= tbName.ClientID %>">Name</label>
<input id="cphBody_tbName" runat="server" .../>
于 2016-07-31T03:49:56.640 回答