IT박스

사용자 지정 속성에 대한 클라이언트 측 유효성 검사 수행

itboxs 2020. 10. 26. 07:50
반응형

사용자 지정 속성에 대한 클라이언트 측 유효성 검사 수행


사용자 지정 유효성 검사 속성을 만들었습니다.

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

            return true;
        }

    }

jquery를 사용하여 클라이언트 측에서도 작동하도록하려면 어떻게해야합니까?


진행 방법은 다음과 같습니다.

사용자 지정 유효성 검사 속성을 정의하여 시작합니다.

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

IClientValidatable을 어떻게 구현하는지 주목하십시오 . 다음으로 모델을 작성합니다.

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

그런 다음 컨트롤러 :

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

마지막으로보기 :

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

마법이 일어나는 마지막 부분은 사용자 지정 어댑터를 정의하는 것입니다.

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

질문을받은 후 약간의 시간이 걸렸지 만 여전히 메타 데이터가 마음에 들고 단순화 된 대안이 열려있는 경우 다음 주석을 사용하여 문제를 해결할 수 있습니다.

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

그것은 서버와 클라이언트 모두에서 작동합니다. 자세한 내용은 ExpressiveAnnotations 라이브러리를 참조하십시오.

참고URL : https://stackoverflow.com/questions/4747184/perform-client-side-validation-for-custom-attribute

반응형