ProgramingTip

@Html 도우미가 생성하는 동안 MVC에서 'data-val-number'유효성 검사를 변경하는 방법

bestdevel 2020. 10. 20. 07:53
반응형

@Html 도우미가 생성하는 동안 MVC에서 'data-val-number'유효성 검사를 변경하는 방법


이 모델을 가정합니다.

Public Class Detail
    ...
    <DisplayName("Custom DisplayName")>
    <Required(ErrorMessage:="Custom ErrorMessage")>
    Public Property PercentChange As Integer
    ...
end class

그리고보기 :

@Html.TextBoxFor(Function(m) m.PercentChange)

이 html을 진행합니다.

   <input data-val="true" 
    data-val-number="The field 'Custom DisplayName' must be a number." 
    data-val-required="Custom ErrorMessage"     
    id="PercentChange" 
    name="PercentChange" type="text" value="0" />

나는 사용자 정의 할 data-val-number내가 있기 때문에 생성 한 추측 오류 메시지 PercentChange입니다 Integer. 나는 그것을 변경하기 위해 사용하고자하는 것이거나 range관련된 모든 것이 작동하지 않습니다.
눈에 거슬리지 않는 js 파일 자체를 편집하거나 클라이언트 측에서 재정의 할 기회가 있다고 알고 있습니다. data-val-number서버 측의 다른 사람들과의 오류 메시지 를 변경하고 싶습니다 .


쉽지 않을 기본 메시지는 System.Web.Mvc어셈블리에 포함 된 리소스로 저장하고 가져 오는 메소드는 내부 봉인 내부 클래스 ( System.Web.Mvc.ClientDataTypeModelValidatorProvider+NumericModelValidator.MakeErrorString) 의 전용 정적 메소드입니다 . 마치 마이크로 소프트 코딩을하는 사람이 일급 비밀을 숨기고있는 것 같다 :-)

가능한 솔루션을 설명하는 다음 블로그 게시물수 있습니다. 기본적으로 기존 ClientDataTypeModelValidatorProvider 를 사용자 지정 공급자 로 대체해야합니다 .

해야 할 하드 코어 코딩이 마음에 들지 이름 지정 검사 뷰 모델 내부 의이 정수 값을 수행하고 사용자 오류 메시지를 제공하는 사용자 지정 유효성 검사 속성을 발생합니다. 현지화 할 수도 있습니다).


필드를 렌더링 할 때 데이터 발 번호 속성을 직접 제공하여 메시지를 재정의 할 수 있습니다 . 이것은 기본 메시지를 대체합니다. 이것은 MVC 4에서 작동합니다.

@ Html.EditorFor (model => model.MyNumberField, new {data_val_number = "Supply an integer, dude!"})

Razor의 속성 이름에 밑줄을 추려합니다.


당신이해야 할 일 :

다음 코드 내부를 추가 Application_Start()Global.asax:

 ClientDataTypeModelValidatorProvider.ResourceClassKey = "Messages";
 DefaultModelBinder.ResourceClassKey = "Messages";

VS에서 ASP.NET MVC 프로젝트를 마우스 오른쪽 단추로 클릭합니다. 을 선택 Add => Add ASP.NET Folder => App_GlobalResources합니다.

해당 폴더에 .resx라는 파일을 추가하십시오 Messages.resx.

.resx파일 에 다음 리소스를 추가 합니다.

FieldMustBeDate        The field {0} must be a date.
FieldMustBeNumeric     The field {0} must be a number.
PropertyValueInvalid   The value '{0}' is not valid for {1}.
PropertyValueRequired  A value is required.

FieldMustBeNumeric원하는대로 값을 변경하십시오 ... :)

끝났습니다.


자세한 내용은이 게시물을 확인하십시오.

ASP.NET MVC 및 WebForms에서 기본 오류 메시지 지역화


이 문제를 해결하는 다른 방법으로 RegularExpression 속성을 적용하여 잘못된 항목을 발견하고 거기에 메시지를 설정했습니다.

[RegularExpression(@"[0-9]*$", ErrorMessage = "Please enter a valid number ")]

이것은 약간의 해킹이지만 내 특정 상황에서 다른 솔루션이 제시됩니다.

편집 : 이것은 MVC3에서 잘 작동했지만 MVC4 +에 대한 더 나은 솔루션이 있습니다.


내가 가지고있는 MVC 3에 관한이 책에서. 당신이 할 일은 이것뿐입니다.

public class ClientNumberValidatorProvider : ClientDataTypeModelValidatorProvider 
{ 
   public override IEnumerable<ModelValidator> GetValidators(ModelMetadata metadata, 
                                                          ControllerContext context) 
   { 
       bool isNumericField = base.GetValidators(metadata, context).Any(); 
       if (isNumericField) 
           yield return new ClientSideNumberValidator(metadata, context); 
   } 
} 

public class ClientSideNumberValidator : ModelValidator 
{ 
  public ClientSideNumberValidator(ModelMetadata metadata,  
      ControllerContext controllerContext) : base(metadata, controllerContext) { } 

  public override IEnumerable<ModelValidationResult> Validate(object container) 
  { 
     yield break; // Do nothing for server-side validation 
  } 

  public override IEnumerable<ModelClientValidationRule> GetClientValidationRules() 
  { 
     yield return new ModelClientValidationRule { 
        ValidationType = "number", 
        ErrorMessage = string.Format(CultureInfo.CurrentCulture,  
                                     ValidationMessages.MustBeNumber,  
                                     Metadata.GetDisplayName()) 
        }; 
  } 
} 

protected void Application_Start() 
{ 
    // Leave the rest of this method unchanged 

    var existingProvider = ModelValidatorProviders.Providers 
        .Single(x => x is ClientDataTypeModelValidatorProvider); 
    ModelValidatorProviders.Providers.Remove(existingProvider); 
    ModelValidatorProviders.Providers.Add(new ClientNumberValidatorProvider()); 
} 

ErrorMessage가 어떻게 생성되어 확인하고, 현재 문화권을 지정하고 지역화 된 메시지가 ValidationMessages (여기 문화적 특성) .resx 리소스 파일에서 추출됩니다. 필요하지 않은 경우 자신의 메시지로 바꾸십시오.


다음은 MVC3 소스를 변경하지 않고 메시지 클라이언트 측을 변경하는 또 다른 솔루션입니다. 이 블로그 게시물의 전체 세부 정보 :

https://greenicicle.wordpress.com/2011/02/28/fixing-non-localizable-validation-messages-with-javascript/

간단히 말해서, jQuery를 검사가로드 유효성 된 후 적절한 지역화 파일 과 함께 다음 펼쳐를 포함하면 됩니다 .

(function ($) {
    // Walk through the adapters that connect unobstrusive validation to jQuery.validate.
    // Look for all adapters that perform number validation
    $.each($.validator.unobtrusive.adapters, function () {
        if (this.name === "number") {
            // Get the method called by the adapter, and replace it with one 
            // that changes the message to the jQuery.validate default message
            // that can be globalized. If that string contains a {0} placeholder, 
            // it is replaced by the field name.
            var baseAdapt = this.adapt;
            this.adapt = function (options) {
                var fieldName = new RegExp("The field (.+) must be a number").exec(options.message)[1];
                options.message = $.validator.format($.validator.messages.number, fieldName);
                baseAdapt(options);
            };
        }
    });
} (jQuery));

ClientDataTypeModelValidatorProvider 클래스의 ResourceKey를 FieldMustBeNumeric 키가 포함 된 전역 리소스의 이름으로 설정하여 번호의 mvc 유효성 검사 오류 메시지를 사용자 지정 메시지로 변경할 수 있습니다. 또한 날짜 유효성 검사 오류 메시지의 핵심은 FieldMustBeDate입니다.

ClientDataTypeModelValidatorProvider.ResourceKey="MyResources"; // MyResource is my global resource

다음은 각 항목에 대한 사용자 지정 메시지가 아닌 메시지를 전역 적으로 지정하려는 경우 작동하는 순수 js의 또 다른 솔루션입니다.

은 유효성 검사 핵심 메시지가 각 요소 jquery.validation.unobtrusive.jsdata-val-xxx속성을 사용 하여 설정된다는 것이므로 라이브러리가 메시지를 사용하기 전에 해당 메시지를 교체하기 만하면됩니다. 약간 더럽지 만 작업을 빨리 완료하고 싶었습니다. 그래서 여기에 숫자 유형 유효성 검사가 있습니다.

    $('[data-val-number]').each(function () {
    var el = $(this);
    var orig = el.data('val-number');

    var fieldName = orig.replace('The field ', '');
    fieldName = fieldName.replace(' must be a number.', '');

    el.attr('data-val-number', fieldName + ' باید عددی باشد')
});

좋은 점은 확장 할 수있는 것입니다.


이것도 확인하십시오.

ASP.NET MVC 3의 유효성 검사에 대한 전체 가이드 -2 부

기사의 주요 부분은 다음과 가변합니다.

클라이언트와 서버 모두에서 작동하는 완전한 기능의 사용자 지정 유효성 검사기를 만드는 데는 네 가지 부분이 있습니다. 먼저 ValidationAttribute서버 측 유효성 검사 로직 을 하위 클래스로 분류 하고 추가합니다. 다음으로 IClientValidatableHTML5 data-*속성을 클라이언트에 많은 수있는 속성을 구현 합니다 . 셋째, 클라이언트에서 유효성 검사를 수행하는 사용자 지정 JavaScript 함수를 작성합니다. 마지막으로 HTML5 속성을 사용자 정의 함수가 수있는 형식으로 변환하는 어댑터를 만듭니다. 이것은 많은 작업처럼 들리지만 일단 시작하면 최후에서 발생하는 것을 알게됩니다.

ValidationAttribute 서브 클래 싱

이 예제에서는 한 속성의 값이 다른 속성의 값과 같지 않은지 확인하는 NotEqualTo 유효성 검사기를 작성합니다.

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
public sealed class NotEqualToAttribute : ValidationAttribute
{
    private const string DefaultErrorMessage = "{0} cannot be the same as {1}.";

    public string OtherProperty { get; private set; }

    public NotEqualToAttribute(string otherProperty)
        : base(DefaultErrorMessage)
    {
        if (string.IsNullOrEmpty(otherProperty))
        {
            throw new ArgumentNullException("otherProperty");
        }

        OtherProperty = otherProperty;
    }

    public override string FormatErrorMessage(string name)
    {
        return string.Format(ErrorMessageString, name, OtherProperty);
    }

    protected override ValidationResult IsValid(object value, 
        ValidationContext validationContext)
    {
        if (value != null)
        {
            var otherProperty = validationContext.ObjectInstance.GetType()
                .GetProperty(OtherProperty);

            var otherPropertyValue = otherProperty
                .GetValue(validationContext.ObjectInstance, null);

            if (value.Equals(otherPropertyValue))
            {
                return new ValidationResult(
                    FormatErrorMessage(validationContext.DisplayName));
            }
        }
    return ValidationResult.Success;
    }        
}

RegisterModel의 암호 속성에 새 특성을 추가하고 응용 프로그램을 실행합니다.

[Required]
[DataType(DataType.Password)]
[Display(Name = "Password")]
[NotEqualTo("UserName")]
public string Password { get; set; }
...

IClientValidatable 구현

ASP.NET MVC 2에는 클라이언트 측 유효성 검사를 추가하는 것이 있었지만 그다지 예쁘지는 존재합니다. 고맙게도 MVC 3에서는 상황이 개선되고 프로세스는 이제 상당히 사소하며 고맙게도 이전 버전에서와 같이 변경하지 않습니다.Global.asax .

첫 번째 단계는 사용자 지정 유효성 검사 속성이 IClientValidatable을 구현하는 것입니다. 이것은 간단한 메소드 메소드입니다.

public IEnumerable<ModelClientValidationRule> GetClientValidationRules(
    ModelMetadata metadata,
    ControllerContext context)
{
    var clientValidationRule = new ModelClientValidationRule()
    {
        ErrorMessage = FormatErrorMessage(metadata.GetDisplayName()),
        ValidationType = "notequalto"
    };

    clientValidationRule.ValidationParameters.Add("otherproperty", OtherProperty);

    return new[] { clientValidationRule };
}

지금 애플리케이션을 실행하고 소스를 보면 비밀번호 입력 html에 notequalto데이터 속성이 포함 되어 있음을 알 수 있습니다.

<div class="editor-field">
    <input data-val="true" data-val-notequalto="Password cannot be the same as UserName." 
    data-val-notequalto-otherproperty="UserName" 
    data-val-regex="Weak password detected." 
    data-val-regex-pattern="^(?!password$)(?!12345$).*" 
    data-val-required="The Password field is required." 
    id="Password" name="Password" type="password" />
    <span class="hint">Enter your password here</span>
    <span class="field-validation-valid" data-valmsg-for="Password" 
    data-valmsg-replace="true"></span>
</div>

사용자 지정 jQuery 유효성 검사 함수 만들기

이 모든 코드는 별도의 JavaScript 파일에 배치하는 것이 좋습니다.

(function ($) {
    $.validator.addMethod("notequalto", function (value, element, params) {
        if (!this.optional(element)) {
            var otherProp = $('#' + params);
            return (otherProp.val() != 
        }
    return true;
});

$.validator.unobtrusive.adapters.addSingleVal("notequalto", "otherproperty");

}(jQuery));

유효성 검사 요구 사항에 따라 jquery.validate 라이브러리에 유효성 검사 자체에 필요한 코드가 이미 있음을 알 수 있습니다. jquery.validate에는 구현되지 않았거나 데이터 주석에 매핑되지 않은 많은 유효성 검사기가 있습니다. 따라서 이러한 유효성 검사가 필요를 충족하는 경우 자바 스크립트로 작성해야하는 것은 어댑터 또는 내장 어댑터에 대한 호출뿐입니다. 한 줄에 불과합니다. jquery.validate.js 내부를 살펴보고 사용 가능한 것을 찾으십시오.

기존 jquery.validate.unobtrusive 어댑터 사용

어댑터의 역할은 data-*양식 요소 의 HTML5 속성 을 읽고이 데이터를 jquery.validate 및 사용자 정의 유효성 검사 기능에서 이해할 수있는 양식으로 변환하는 것입니다. 모든 작업을 직접 수행 할 필요는 없으며 대부분의 경우 내장 어댑터를 호출 할 수 있습니다. jquery.validate.unobtrusive는 대부분의 상황에서 사용할 수있는 3 개의 내장 어댑터를 선언합니다. 이것들은:

jQuery.validator.unobtrusive.adapters.addBool - used when your validator does not need any additional data.
jQuery.validator.unobtrusive.adapters.addSingleVal - used when your validator takes in one piece of additional data.
jQuery.validator.unobtrusive.adapters.addMinMax - used when your validator deals with minimum and maximum values such as range or string length.

유효성 검사기가 이러한 범주 중 하나에 해당하지 않는 경우 jQuery.validator.unobtrusive.adapters.add메서드를 사용하여 고유 한 어댑터를 작성해야합니다 . 이것은 들리는 것만 큼 어렵지 않으며 기사 뒷부분에서 예제를 볼 것입니다.

addSingleVal메서드를 사용하여 어댑터 이름과 전달하려는 단일 값의 이름을 전달합니다. 유효성 검사 함수의 이름이 어댑터와 다른 경우 세 번째 매개 변수 ( ruleName)를 전달할 수 있습니다 .

jQuery.validator.unobtrusive.adapters.addSingleVal("notequalto", "otherproperty", "mynotequaltofunction");

이 시점에서 맞춤 유효성 검사기가 완료되었습니다.

더 나은 이해를 위해 더 많은 설명과 더 복잡한 예제를 제공 하는 기사 자체참조하십시오 .

HTH.


방금 한 다음 정규식을 사용했습니다.

$(document).ready(function () {
    $.validator.methods.number = function (e) {
        return true;
    };
});


[RegularExpression(@"^[0-9\.]*$", ErrorMessage = "Invalid Amount")]
public decimal? Amount { get; set; }

또는 간단하게 할 수 있습니다.

@Html.ValidationMessageFor(m => m.PercentChange, "Custom Message: Input value must be a number"), new { @style = "display:none" })

도움이 되었기를 바랍니다.


KendoGrid 에이 문제가 있습니다.보기 끝에서 스크립트를 사용하여 data-val-number를 재정의합니다.

@(Html.Kendo().Grid<Test.ViewModel>(Model)
  .Name("listado")
  ...
  .Columns(columns =>
    {
        columns.Bound("idElementColumn").Filterable(false);
    ...
    }

그리고 적어도 View의 끝에 다음과 같이 넣었습니다.

<script type="text/javascript">
        $("#listado").on("click", function (e) {
            $(".k-grid #idElementColumn").attr('data-val-number', 'Ingrese un número.');
        });    
</script>

나는 이것을 내 견해에 올려 놓는다.

@Html.DropDownListFor(m => m.BenefNamePos, Model.Options, new { onchange = "changePosition(this);", @class="form-control", data_val_number = "This is my custom message" })

참고 URL : https://stackoverflow.com/questions/4828297/how-to-change-data-val-number-message-validation-in-mvc-while-it-is-generated

반응형