jQuery Unobtrusive Validation이란 무엇입니까?

jQuery Validation 플러그인이 무엇인지 알고 있습니다. jQuery Unobtrusive Validation 라이브러리는 Microsoft에서 만든 것으로 ASP.NET MVC 프레임 워크에 포함되어 있습니다. 그러나 그것이 무엇인지 설명하는 단일 온라인 소스를 찾을 수 없습니다. 표준 jQuery Validation 라이브러리와 "unbtrusive"버전의 차이점은 무엇입니까?

브래드 윌슨 (Brad Wilson)은 눈 에 거슬리지 않는 유효성 검사 와 눈 에 거슬리지 않는 아약스 에 대한 몇 가지 훌륭한 기사를 가지고 있습니다.
또한이 Pluralsight 비디오 에서 "AJAX and JavaScript"섹션에 아주 잘 나와 있습니다.

기본적으로, 그것은 단순히 오염시키지 않는 자바 스크립트 유효성 검사입니다 당신의 자신과 소스 코드를 확인 코드입니다. data-HTML에서 속성 을 사용하여 수행됩니다 .

눈에 거슬리지 않는 방법으로 :

• validate () 메소드를 호출 할 필요는 없습니다.
• 데이터 속성 (data-val, data-val-required 등)을 사용하여 요구 사항을 지정합니다.

Jquery 유효성 검사 예 :

<input type="text" name="email" class="required">
<script>
        $(function () {
            $("form").validate();
        });
</script>

Jquery는 눈에 띄지 않는 예제를 확인합니다 .

<input type="text" name="email" data-val="true" 
data-val-required="This field is required.">  

<div class="validation-summary-valid" data-valmsg-summary="true">
    <ul><li style="display:none"></li></ul>
</div>

명확하게하기 위해 jQuery Validation Unobtrusive를 사용하여 폼 유효성 검사를 보여주는보다 자세한 예제가 있습니다.

둘 다 jQuery와 함께 다음 JavaScript를 사용합니다.

  $("#commentForm").validate({
    submitHandler: function(form) {
      // some other code
      // maybe disabling submit button
      // then:
      alert("This is a valid form!");
//      form.submit();
    }
  });

두 플러그인의 주요 차이점은 각 접근 방식에 사용되는 속성입니다.

jQuery 유효성 검사

다음 속성을 사용하십시오.

• 필요한 경우 설정
• 올바른 형식 (이메일 등)을위한 유형 설정
• 크기 (최소 길이 등)와 같은 다른 속성 설정

여기 양식이 있습니다 ...

<form id="commentForm">
  <label for="form-name">Name (required, at least 2 characters)</label>
  <input id="form-name" type="text" name="form-name" class="form-control" minlength="2" required>
  <input type="submit" value="Submit">
</form>

jQuery 유효성 검증

다음과 같은 데이터 속성이 필요합니다.

• data-msg-required = "필수입니다."
• data-rule-required = "true / false"

여기 양식이 있습니다 ...

<form id="commentForm">
  <label for="form-x-name">Name (required, at least 2 characters)</label>
  <input id="form-x-name" type="text" name="name" minlength="2" class="form-control" data-msg-required="Name is required." data-rule-required="true">
  <input type="submit" value="Submit">
</form>

이러한 예제 중 하나를 기반으로, 필요한 양식 필드가 채워지고 추가 속성 기준을 충족하면 모든 양식 필드의 유효성을 확인하는 메시지가 나타납니다. 그렇지 않으면 문제를 나타내는 양식 필드 근처에 오류를 나타내는 텍스트가 있습니다.

참조 :-jQuery 유효성 검사 : https://jqueryvalidation.org/documentation/

jQuery Validation Unobtrusive Native는 ASP.Net MVC HTML 도우미 확장의 모음입니다. 이들은 HTML 5 데이터 속성에 의해 구동되는 유효성 검사를위한 jQuery Validation의 기본 지원을 사용합니다. Microsoft는 jquery.validate.unobtrusive.js를 MVC 3과 함께 제공했습니다. jQuery 유효성 검사 및 HTML 5 데이터 속성 ( "비 분명 적"부분)의 조합을 사용하여 클라이언트 측에 데이터 모델 유효성 검사를 적용하는 방법을 제공했습니다.