Skip to main content
 首页 » 编程设计

JQuery Unobtrusive Validation 在不应该触发的情况下触发下拉列表

2026年07月31日3grandyang

我在使用 View 模型的 .NET MVC3 中有以下内容。我正在使用 Razor 和 FluentValidation(但我也尝试过 DataAnnotations,得到了相同的结果)。

从 View :

@Html.DropDownListFor(model=>model.L2, Model.RegisteredL2s, "[Select One]") 

来自 Controller :

    [HttpGet] 
    [Authorize(Roles = "Supervisor")] 
    public ActionResult Edit(string siteId, bool? isNew) 
    { 
            SiteEditViewModel model = new SiteEditViewModel(); 
 
                   List<SelectListItem> items = RegisteredL2Repository.GetRegisteredL2List() 
                                                      .Select(x => new SelectListItem() { Text = x.L2, Value = x.L2.Trim() }) 
                                                      .OrderBy(x => x.Text) 
                                                      .ToList(); 
 
                   model.RegisteredL2s = items.AsEnumerable(); 
 
                   if(!isNew.HasValue) 
                   { 
                        model.IsNew = false; 
                   } 
 
                   if(isNew.HasValue && (bool)isNew) 
                   { 
                        model.IsNew = true; 
                        return View(model); 
                   } 
 
                   if(model.IsNew) 
                   { 
                        return View(model); 
                   } 
 
                   model.ConvertModelToViewModel(SiteRepository.GetSite(siteId)); 
 
                   return View("Edit", model); 
              } 
     } 

来自 View 模型:

[DisplayName("Site:")] 
          [TextboxLength(2)] 
          public virtual string SiteId { get; set; } 
 
          [DisplayName("L2:")] 
          public virtual string L2 { get; set; } 
 
          [DisplayName("Description:")] 
          [TextboxLength(50)] 
          public virtual string Description { get; set; } 
 
          public IEnumerable<SelectListItem> RegisteredL2s { get; set; } 
 
          public bool IsNew { get; set; } 
 
          public string OverallError { get; set; } 

来 self 的验证器类(流畅):

public SiteEditValidator() 
          { 
               RuleFor(model => model.SiteId) 
                    .NotEmpty() 
                    .WithMessage("Site is required.") 
                    .Length(2) 
                    .WithMessage("Site must be 2 characters. Ex: 1C") 
                    .Matches(@"^[0-9A-Za-z]{2}$") 
                    .WithMessage("Site contains invalid characters. Only letters and numbers."); 
 
               RuleFor(model => model.L2) 
                    .NotEmpty() 
                    .WithMessage("L2 is required.") 
                    .Length(2) 
                    .WithMessage("L2 must be 2 characters. Ex: 30") 
                    .Matches(@"^[\d]{2}$") 
                    .WithMessage("L2 contains invalid characters. Only numbers are allowed."); 
 
               RuleFor(model => model.Description) 
                    .NotEmpty() 
                    .WithMessage("Description is required.") 
                    .Length(3, 50) 
                    .WithMessage("Description must be at least 3 characters and not more than 50.") 
                    .Matches(@"^[\w\,\.\'\-\s]{3,50}$") 
                    .WithMessage("Description contains some invalid characters."); 
          } 

以及生成的 HTML:

<div class="Edit-Field"> 
               <div class="Edit-Field-Label" style="width: 5em"> 
                    <label for="SiteId">Site:</label> 
               </div> 
               <div class="Editor-For"> 
                    <input autocomplete="off" data-val="true" data-val-length="Site must be 2 characters. Ex: 1C" data-val-length-max="2" data-val-length-min="2" data-val-regex="Site contains invalid characters. Only letters and numbers." data-val-regex-pattern="^[0-9A-Za-z]{2}$" data-val-required="Site is required." id="SiteId" maxlength="2" name="SiteId" readonly="readonly" style="width: 2.5em; background-color: LightGrey" type="text" value="30" /> 
                    <div class="Validation-For"> 
                         <span class="field-validation-valid" data-valmsg-for="SiteId" data-valmsg-replace="true"></span> 
                    </div> 
               </div> 
          </div> 
          <div class="Edit-Field"> 
               <div class="Edit-Field-Label" style="width: 5em"> 
                    <label for="L2">L2:</label> 
               </div> 
               <div class="Editor-For"> 
                    <select data-val="true" data-val-length="L2 must be 2 characters. Ex: 30" data-val-length-max="2" data-val-length-min="2" data-val-regex="L2 contains invalid characters. Only numbers are allowed." data-val-regex-pattern="^[\d]{2}$" data-val-required="L2 is required." id="L2" name="L2"><option value="">[Select One]</option> 
<option value="30">30</option> 
<option value="31">31</option> 
<option value="32">32</option> 
</select> 
                    <div class="Validation-For"> 
                         <span class="field-validation-valid" data-valmsg-for="L2" data-valmsg-replace="true"></span> 
                    </div> 
               </div> 
          </div> 
          <div class="Edit-Field"> 
               <div class="Edit-Field-Label" style="width: 5em"> 
                    <label for="Description">Description:</label> 
               </div> 
               <div class="Editor-For"> 
                    <input autocomplete="off" data-val="true" data-val-length="Description must be at least 3 characters and not more than 50." data-val-length-max="50" data-val-length-min="3" data-val-regex="Description contains some invalid characters." data-val-regex-pattern="^[\w\,\.\&#39;\-\s]{3,50}$" data-val-required="Description is required." id="Description" maxlength="50" name="Description" style="width: 30em" type="text" value="Central Office-Cash Receipts Unit" /> 
                    <div class="Validation-For"> 
                         <span class="field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="true"></span> 
                    </div> 
               </div> 
          </div> 

现在的问题是:

我从预填充的 IEnumerable (RegisteredL2s) 中提取 L2 字段,并将其作为下拉列表(ID=L2,大约在 html 的中间)。 L2 是必需的,并且必须具有一定的长度 (2)。我的问题是,即使用户选择了[选择一个]以外的其他内容,也会出现长度错误。如果我删除该错误,则会出现正则表达式错误。提交时的服务器端验证工作正常。为什么要这样做?我该如何阻止它?或者我可以关闭这一字段的客户端吗?

更新: 我相信我发现了 jquery.validate.js 的问题...我希望有人确认这一点。

这是我更改的原始代码行,似乎解决了我的问题: 这是第 683 行。第 686 行是问题点。

getLength: function(value, element) { 
  switch( element.nodeName.toLowerCase() ) { 
    case 'select': 
 
        return $("option:selected", element).length;            case 'input': 
        if( this.checkable( element) ) 
        return this.findByName(element.name).filter(':checked').length; 
        } 
    return value.length; 
    }, 

我相信,当您有所需的下拉值并且还存在长度验证器时,它会生成错误。当我运行代码时,该行的长度返回 1 而不是 2。如果我将粗体行更改为 return $("option:selected", element).val().length; 它会正常运行。任何关于这是否是一个适当的错误以及我的修复是否不会干扰 jquery.validation 的任何其他部分的评论都会有所帮助。

这是来自 jquery.validation 1.8.1(从 1.7 更新,因为我认为我的版本可能不同步)Jquery = 1.6.1。

更新 2: 不确定这是否应该是准确的答案,但是:

事实证明,根据 rangelength 的 JQuery.Validation 文档(这是 jquery.validation.unobtrusive 为长度恰好为 2 构造的)here它指出,对于选择(下拉列表)来说,它是为了确保选择了一定数量的项目,而不是为了验证值的长度。

我在检查值长度或在客户端关闭此特定项目的验证后,同时保留服务器端验证。

请您参考如下方法:

这不是一个完整的答案(我不确定如何在 DataAnnotations 下完成同样的事情),这就是为什么我没有将其标记为接受的答案。

在 FluentValidation 下,我更改了上面的以下行

RuleFor(model => model.L2)                      
     .NotEmpty()                      
     .WithMessage("L2 is required.")                      
     .Length(2)                      
     .WithMessage("L2 must be 2 characters. Ex: 30")                      
     .Matches(@"^[\d]{2}$")                      
     .WithMessage("L2 contains invalid characters. Only numbers are allowed."); 

致:

RuleFor(model => model.L2) 
                .NotEmpty() 
                .WithMessage("L2 is required.") 
                .Length(2) 
                .When(x => 1==1) 
                .WithMessage("L2 must be 2 characters. Ex: 30") 
                .Matches(@"^[\d]{2}$") 
                .WithMessage("L2 contains invalid characters or is too long. Only numbers are allowed."); 

这有效地关闭了客户端验证,但保持服务器端完好无损。显然 Fluent 不会为具有 When 条件的项目生成客户端验证。希望这对那里的人有帮助。