将 ASP.NET 验证与 JQuery 相结合的优雅方式答案

【问题标题】：Elegant way to combine ASP.NET validation with JQuery将 ASP.NET 验证与 JQuery 相结合的优雅方式
【发布时间】：2009-01-20 01:39:00
【问题描述】：

如何最好地将 JQuery 与 ASP.NET 客户端验证模型结合起来？

我通常避免实现 ASP.NET 验证模型，因为它似乎总是对我正在做的事情来说太过分了。对于我现在正在处理的网站，我只是收集非关键用户数据，只需要一些基本的验证。我不希望消息出现在 DOM 或类似的东西中。无论如何，我总是发现很难让它看起来正确。

但我现在需要实现一些更优雅的东西。我想在 JQuery 中利用的是聪明的搜索表达式，例如“告诉我是否至少选中了一个复选框”。我是 JQuery 新手，但我认为这大约是 1 行 JQuery，在传统的 ASP.NET 模型中要复杂得多。

所以我想充分利用 JQuery 的能力，但不完全颠覆 ASP.NET 的验证模型。

到目前为止，我最好的方法是这样的（这几乎是在 ASP.NET 的背后）：

$('#<%=btnJoinMailingList.ClientID %>').bind('click', function(event) {

   if (...) {
       alert("You must enter a name");
       return false;
   }     
   return true;
});

这里有什么更好的方法？有没有推荐的 JQuery 插件？

附言。我不想使用 MVC 模型。我正在尝试创建一个非常“RAD”的网站，但还没有时间深入研究那些有趣的新事物。

【问题讨论】：

标签： asp.net jquery

【解决方案1】：

ASP.NET 有许多验证控件，其中之一是 CustomValidator。
您可以给它一个自定义 JavaScript 函数，该函数使用 jQuery 并通过参数返回 true 或 false。您可以使用此控件自动显示错误消息，或者只运行 jQuery 代码并手动处理显示。

ASP:

<asp:CustomValidator ID="CustomValidator1" runat="server" Display="None"
                     ClientValidationFunction="checkTextareaLengths">
</asp:CustomValidator>

JavaScript：

function checkTextareaLengths(source, args){
  args.IsValid = true;
  $('textarea').each(function(){
    if($(this).text().lenght > 400)
      args.IsValid = false;
  });
}

【讨论】：

注意：我不认为只返回 true 或 false 会起作用 - 您需要接受函数的 2 个参数（发送者，args）并设置 args.IsValid = ok;最后是为了与 webforms 验证框架很好地配合。
@chris - 非常正确 - 我知道得更清楚。你知道吗，我会更新答案！
@chris - 完成！在我的辩护中，我隐约记得返回 true 或 false 确实对我有用，但这是官方的方法，肯定更好（我当然希望我没有推荐任何愚蠢的东西 - 这个问题有 5700 次浏览！）。谢谢。
另外，我会将“arguments”更改为“args”，这样它就不会与javascript中的arguments关键字混淆......

【解决方案2】：

ASP.NET webforms 和 jQuery 的验证模型非常非常相似，恕我直言，两者都是客户端，实现其中一个不一定会破坏另一个。唯一真正的区别是，在幕后，如果您有一个未验证的字段，ASP.NET 验证器将导致 Page.Validate() 方法返回 false。

您可以选择手动滚动您自己的验证控件，然后导致相同的行为，但正如您自己所说，这可能是矫枉过正。

jQuery 也有自己的 Validator 插件，您可能想看看：http://docs.jquery.com/Plugins/Validation/Validator。

【讨论】：

【解决方案3】：

ASP.NET 验证器是一个带有附加属性的跨度。使用 jquery，您可以访问页面上的所有验证器或按任何条件过滤它们由 jquery 支持。要通过 javascript 调用 ValidatorValidate 函数强制验证。例如：

function validate_step(step_element) {
        // find all validators on step_element and force validation
        var validators = $(step_element).find("span[controltovalidate]");
        var stepIsValid = true;
        validators.each( function() {
           ValidatorValidate(this); stepIsValid &= this.isvalid;
        });
        return stepIsValid;
    }

【讨论】：