ASP.NET MVC2 自定义 jQuery 验证：客户端

Posted 2023-05-09

【中文标题】ASP.NET MVC2 自定义 jQuery 验证：客户端

【英文标题】：ASP.NET MVC2 Custom jQuery validation: client -side

【发布时间】：2011-02-21 18:39:16

【问题描述】：

我想为 2 个日期选择器创建一个验证规则（startDate 小于 endDate）。

我创建了一个验证属性：

[AttributeUsage(AttributeTargets.Class, AllowMultiple = true, Inherited = true)]
public sealed class DateCompareAttribute : ValidationAttribute

    private const string _defaultErrorMessage = "'0' is less then '1'.";

    public DateCompareAttribute(string startDateProperty, string endDateProperty)
        : base(_defaultErrorMessage)
    
        StartDateProperty = startDateProperty;
        EndDateProperty = endDateProperty;
    

    public string StartDateProperty  get; private set; 
    public string EndDateProperty  get; private set; 


    public override string FormatErrorMessage(string name)
    
        return String.Format(CultureInfo.CurrentUICulture, ErrorMessageString, StartDateProperty, EndDateProperty);
    

    public override bool IsValid(object value)
    
        PropertyDescriptorCollection properties = TypeDescriptor.GetProperties(value);
        object startValue = properties.Find(StartDateProperty, true).GetValue(value);
        object endValue = properties.Find(EndDateProperty, true).GetValue(value);
        if (startValue.GetType() == typeof(DateTime?) && endValue.GetType() == typeof(DateTime?))
        
            var start = ((DateTime?)startValue);
            var end = ((DateTime?)endValue);
            return (start.Value < end.Value);
        
        return false;
    

并将 ti 添加到我的 Dto 中：

[DateCompare("StartDate", "EndDate")]
public class QualificationInput...

我创建了一个验证器：

public class DateCompareValidator : DataAnnotationsModelValidator<DateCompareAttribute>

    string startField;
    private string endField;
    string _message;

    public DateCompareValidator(ModelMetadata metadata, ControllerContext context, DateCompareAttribute attribute)
        : base(metadata, context, attribute)
    
        startField = attribute.StartDateProperty;
        endField = attribute.EndDateProperty;
        _message = attribute.ErrorMessage;
    

    public override IEnumerable<ModelClientValidationRule> GetClientValidationRules()
    
        var rule = new ModelClientValidationRule
        
            ErrorMessage = _message,
            ValidationType = "dateCompare"
        ;
        rule.ValidationParameters.Add("startField", startField);
        rule.ValidationParameters.Add("endField", endField);

        return new[]  rule ;
    

并在 Application_Start() 中的 Global.asax.cs 中注册：

DataAnnotationsModelValidatorProvider.RegisterAdapter(typeof(DateCompareAttribute), typeof(DateCompareValidator));

在 MicrosoftMvcJQueryValidation.js 中我做了以下更改：

switch (thisRule.ValidationType)

.....
   case "dateCompare":
      __MVC_ApplyValidator_DateCompare(rulesObj,
      thisRule.ValidationParameters["startField"], thisRule.ValidationParameters["endField"]);
      break;
.....


function __MVC_ApplyValidator_DateCompare(object, startField, endField) 
    object["startField"] = startField;
    object["endField"] = endField;


jQuery.validator.addMethod("dateCompare", function(value, element, params) 
    if ($('#' + params["startField"]).val() < $('#' + params["endField"]).val())
     return true; 
    return false;
, jQuery.format("Error"));

但它不起作用 :( 对这种类型的规则没有客户端验证（其他类型如 required 工作正常）

我做错了什么？

【参考方案1】：

您不需要更改 MicrosoftMvcJQueryValidation.js。我最近不得不自己解决这个问题，以下可能会有所帮助；

http://www.deepcode.co.uk/2010/08/custom-mvc-2-validation-using-jquery.html

【参考方案2】：

我会复制粘贴整个内容，但我认为您最好阅读 Phil Haack 的 custom validation in MVC 指南

首先，我们需要一个模型类。让我们做一些简单的事情，比如 Customer：

public partial class Customer

    public string Name  get; set; 
    public int Age  get; set; 

然后是你的验证逻辑

[MetadataType(typeof(CustomerMetaData))]
public partial class Customer

    class CustomerMetaData
    
        [Required(ErrorMessage="You must supply a name for a customer.")]
        [StringLength(50, ErrorMessage = "A customer name cannot exceed 50 characters.")]
        public string Name  get; set; 
    

然后连接你的脚本

<script type="text/javascript" src="../../Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../Scripts/MicrosoftMvcJQueryValidation.js"></script>

最后，在表单标签开始之前的某处，将以下标记添加到视图代码中：

<% Html.EnableClientValidation(); %>

【讨论】：

我确实阅读了这篇文章，我在进行更改时受到了它的指导。但不同的是我使用的是 JQuery 验证

【参考方案3】：

看起来您正在将 DateCompare 属性应用于 ViewModel 类（而不是属性）。这对服务器验证有效，但意味着它没有机会选择加入客户端验证。见Link。