Thực hiện xác nhận phía khách hàng cho thuộc tính tùy chỉnh

Question

tôi đã tạo ra một thuộc tính tùy chỉnh Validation:

public class FutureDateAttribute : ValidationAttribute 
    { 
     public override bool IsValid(object value) 
     { 
      if (value == null|| (DateTime)value < DateTime.Now) 
       return false; 

      return true; 
     } 

    } 

Làm thế nào tôi có thể có được điều này để làm việc về phía khách hàng quá với jquery?

Answer 1

Dưới đây là cách thức tiến hành:

Bắt đầu bằng cách định nghĩa các thuộc tính xác nhận tùy chỉnh:

public class FutureDateAttribute : ValidationAttribute, IClientValidatable 
{ 
    public override bool IsValid(object value) 
    { 
     if (value == null || (DateTime)value < DateTime.Now) 
      return false; 

     return true; 
    } 

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context) 
    { 
     yield return new ModelClientValidationRule 
     { 
      ErrorMessage = this.ErrorMessage, 
      ValidationType = "futuredate" 
     }; 
    } 
} 

Thông báo nó như thế nào thực hiện IClientValidatable. Tiếp theo chúng ta viết mô hình của chúng tôi:

public class MyViewModel 
{ 
    [FutureDate(ErrorMessage = "Should be in the future")] 
    public DateTime Date { get; set; } 
} 

Sau đó, một bộ điều khiển:

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(new MyViewModel 
     { 
      // intentionally put in the past 
      Date = DateTime.Now.AddDays(-1) 
     }); 
    } 

    [HttpPost] 
    public ActionResult Index(MyViewModel model) 
    { 
     return View(model); 
    } 
} 

và cuối cùng là một cái nhìn:

@using (Html.BeginForm()) 
{ 
    @Html.LabelFor(x => x.Date) 
    @Html.TextBoxFor(x => x.Date) 
    @Html.ValidationMessageFor(x => x.Date) 
    <input type="submit" value="OK" /> 
} 

Phần cuối cùng cho sự kỳ diệu xảy ra là xác định adapter tùy chỉnh :

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script> 
<script type="text/javascript"> 
    // we add a custom jquery validation method 
    jQuery.validator.addMethod('greaterThan', function (value, element, params) { 
     if (!/Invalid|NaN/.test(new Date(value))) { 
      return new Date(value) > new Date($(params).val()); 
     } 
     return isNaN(value) && isNaN($(params).val()) || (parseFloat(value) > parseFloat($(params).val())); 
    }, ''); 

    // and an unobtrusive adapter 
    jQuery.validator.unobtrusive.adapters.add('futuredate', { }, function (options) { 
     options.rules['greaterThan'] = true; 
     options.messages['greaterThan'] = options.message; 
    }); 
</script> 

Answer 2

Mất một thời gian ngắn kể từ khi câu hỏi của bạn đã được yêu cầu, nhưng nếu bạn vẫn như siêu dữ liệu, và bạn vẫn mở cho giải pháp thay thế đơn giản, bạn có thể giải quyết vấn đề bằng cách sử dụng các chú thích như sau:

[Required] 
[AssertThat("Date > Now()")] 
public DateTime? Date { get; set; } 

Nó hoạt động cho cả hai - máy chủ và máy khách, ngoài cái hộp. Để biết thêm chi tiết, hãy xem thư viện ExpressiveAnnotations.