[javascript] jQuery Unobtrusive Validation이란 무엇입니까?

Program / 글쓴이

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 데이터 속성 ( “비 분명 적”부분)의 조합을 사용하여 클라이언트 측에 데이터 모델 유효성 검사를 적용하는 방법을 제공했습니다.

답변