programing

jQuery 방해되지 않는 유효성 검사란 무엇입니까?

padding 2023. 8. 6. 09:53
반응형

jQuery 방해되지 않는 유효성 검사란 무엇입니까?

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

브래드 윌슨은 눈에 띄지 않는 검증과 눈에 띄지 않는 아약스에 관한 훌륭한 기사를 몇 개 가지고 있습니다.
또한 "AJAX 및 JavaScript" 섹션의 이 다중 사이트 비디오에서도 매우 잘 표시됩니다.

기본적으로 자체 검증 코드로 소스 코드를 오염시키지 않는 것은 단순히 자바스크립트 검증입니다.이 작업은 다음을 사용하여 수행됩니다.data-HTML의 속성입니다.

방해가 되지 않는 방법으로:

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

Jquery 검증 예제:

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

방해가 되지 않는 Jquery Validate 예제:

<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 Untrusive를 사용한 양식 검증을 보여주는 보다 자세한 예가 있습니다.

둘 다 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 Validation: https://jqueryvalidation.org/documentation/

jQuery Validation 방해되지 않는 Native는 ASP의 모음입니다.NetMVC HTML 도우미 확장입니다.HTML 5 데이터 속성을 기반으로 한 검증을 위해 jQuery Validation의 기본 지원을 사용합니다.마이크로소프트는 mvc 3과 함께 jquery.validate.unobtrusive.js를 다시 제공했습니다.jQuery Validation과 HTML 5 데이터 특성("방해가 되지 않는" 부분)을 함께 사용하여 데이터 모델 검증을 클라이언트 측에 적용하는 방법을 제공했습니다.

언급URL : https://stackoverflow.com/questions/11534910/what-is-jquery-unobtrusive-validation

반응형