代码之家  ›  专栏  ›  技术社区  ›  Simon_Weaver

结合asp.net验证和jquery的优雅方法

  •  12
  • Simon_Weaver  · 技术社区  · 16 年前

    如何才能最好地将jquery与asp.net客户端验证模型结合起来?

    我通常都避免实现asp.net验证模型,因为它似乎总是对我所做的事情过于苛刻。对于我现在工作的网站,我只是收集非关键用户数据,只需要一些基本的验证。我不希望在dom或类似的东西中出现消息。不管怎样,我总是觉得很难把它弄对。

    但我现在需要实现一些更优雅的东西。我想在jquery中利用的是聪明的搜索表达式,比如“告诉我是否至少选中了其中一个复选框”。我是jquery新手,但我认为这是一行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”的网站,但还没有时间去钻研那些有趣的新东西。

    3 回复  |  直到 11 年前
        1
  •  12
  •   Kobi    11 年前

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

    Aspx:

    <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;
      });
    }
    
        2
  •  5
  •   Jon Limjap    16 年前

    net webforms和jquery的验证模型非常非常相似,imho,因为两者都是客户端的,实现其中一个并不一定会破坏另一个。唯一真正的区别是,在幕后,asp.net验证器将导致 Page.Validate() 方法返回false(如果有未验证的字段)。

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

    jquery也有自己的验证程序插件,您可能想看看: http://docs.jquery.com/Plugins/Validation/Validator .

        3
  •  5
  •   Ivan    15 年前

    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;
        }