JQuery 양식 유효성 검사 - 입력 상자

JQuery의 간결함은 많은 장소에서 Javascript를 완전히 대체했다. 다음은 JQuery가 폼 검증을 실현하는 것을 보여 준다.
1. 베이스
제출 단추를 눌렀을 때 검증하는 것이 가장 간단하고 직접적인 검증 방식입니다.다음은 이런 검증의 실현 방식이다.
1.1 기본 구조

HTML 코드

JQuery 기본 프레임워크가 JQuery 라이브러리에 도입된 후에 다음과 같은 JQuery 코드 구조를 추가해야 한다.

    // HTML DOM       JS  
    $(function() {

    // JS       
    });

1.2 검증 처리
Javascript의 처리와 달리 JQuery는 요소를 가져오는 방식이 매우 간결하다.따라서 가져오면 이벤트를 직접 추가합니다.(주의: JQuery는 JQuery 대상을, DOM은 DOM 대상을, 양자는 차이가 있기 때문에 속성과 방법은 혼용할 수 없습니다)

    $("#btn_submit").click(function() {
        var strText = $("#txt_submit").val();

        //      
        if ("" == strText) {
          $("#msg").html("        ");
          return false;
        }

        //       
        if (strText.length < 6) {
          $("#msg").html("        6");
          return false;
        }

        //       
        if (strText.length > 10) {
          $("#msg").html("        10");
          return false;
        }

        //     
        if (!/^[\u4e00-\u9fa5]+$/.test(strText)) {
          $("#msg").html("      ");
          return false;
        }

        //          
        $("#msg").html("");
        return true;
    });

Javascript와 JQuery 추가 이벤트의 차이점에 주의하십시오

전체 코드를 보려면 클릭

2. 업그레이드
현재 많은 검증은 제출 단추만 있는 것이 아니라 입력 상자에 입력할 때 실시간으로 검증됩니다. 위의 버전을 업그레이드하겠습니다.

입력 상자의 검증을 이름이 있는 함수로 단독으로 만듭니다.

      //      
      function check() {
        var strText = $("#txt_submit").val();

        //      
        if ("" == strText) {
          $("#msg").html("        ");
          return false;
        }

        //       
        if (strText.length < 6) {
          $("#msg").html("        6");
          return false;
        }

        //       
        if (strText.length > 10) {
          $("#msg").html("        10");
          return false;
        }

        //     
        if (!/^[\u4e00-\u9fa5]+$/.test(strText)) {
          $("#msg").html("      ");
          return false;
        }

        //          
        $("#msg").html("");
        return true;

      }

함수 이름을 제출 단추의 클릭 이벤트 함수와 입력 상자의 키보드 이벤트 함수에 각각 부여합니다.

      //      
      $("#btn_submit").click(check);
      //      
      $("#txt_submit").keyup(check);

이상 두 단계의 승급이 이루어졌습니다.

전체 코드를 보려면 클릭

우정 제시 위의 두 코드 코드는 비교 도구를 사용하여 비교하면 양자의 차이를 뚜렷하게 볼 수 있다.이전의 자바스크립트 코드와 비교하면 자바스크립트 처리 절차와 완전히 같지만 대상 속성 방법이 다르다는 것을 발견할 수 있다.
만약 어떤 의문이 있으면, 아래의 메모를 환영합니다.