ASP.NET Web 窗体中的 jQuery 验证插件

Posted 2023-02-15

【中文标题】ASP.NET Web 窗体中的 jQuery 验证插件

【英文标题】：jQuery Validation plugin in ASP.NET Web Forms

【发布时间】：2010-10-11 19:31:09

【问题描述】：

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

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

我在调用 jquery validate 时也遇到了问题，使用在 asp 控件中被破坏的名称

// 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

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

【参考方案1】：

您可以查看rules 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" />

这样就不用担心 webforms 引擎生成的蹩脚的标识符了。

【参考方案2】：

这里是 using the jQuery Validation plugin with WebForms 和 emulating the concept of validation groups 的例子。一旦你解决了几个问题，它实际上工作得很好。

【讨论】：

您提供的链接包含重要信息。例如，当您每页有多个表单时，需要防止在每次提交表单时调用 jQuery 验证。

在网络表单中，每页只有 1 个表单。

【参考方案3】：

$("#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>

【讨论】：

UniqueID 解决了我的问题，谢谢！我将 ASP.NET 4 与 Webforms 一起使用。

你也可以使用clientidmode。在页面指令或每个控件ClientIDMode="Static" 中将其设置为静态并引用$('#tbUsername')

谢谢伙计。你刚刚帮助我理解了 8 小时的工作......感谢！

【参考方案4】：

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

【讨论】：

这是一个很棒的插件，用于将 jQuery 验证与 ASP.NET 集成。通过支持验证组、验证摘要和关闭客户端验证的能力（如果需要），让生活变得如此轻松。

【参考方案5】：

测试了 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" />

【参考方案6】：

最好的解决方案是在 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"
    , 
.

【参考方案7】：

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

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

【参考方案8】：

一个很好的方法是使用：

或 每当您需要引用服务器项时。

即

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

.......

【参考方案9】：

对于 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 封装在一个函数库中。

我还没有尝试通过 jQuery 加载用户控件，这看起来很重，并且似乎加载了整个页面，尽管可能稍微快一点或不加载。

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

【参考方案10】：

我推荐使用 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

【讨论】：

他的问题是关于使用 validate 和 webforms。

【参考方案11】：

in this article 的信息让我在使用 jQuery 查找匹配项时使用 Control.ClientID...非常有用的信息...

<label for="<%= tbName.ClientID %>">Name</label>
<input id="cphBody_tbName" runat="server" .../>