JS 폼 검증 플러그 인의 데이터 와 논리 분리 작업 실례 분석 【 전략 모드 】

본 고의 실례 는 JS 폼 검증 플러그 인의 데이터 와 논리 분리 작업 을 설명 한다.여러분 께 참고 하도록 공유 하 겠 습 니 다. 구체 적 으로 는 다음 과 같 습 니 다.
이전에 이미 폼 검증 플러그 인 을 썼 는데, 왜 바퀴 를 반복 해서 만 듭 니까?첫 번 째 문 제 는 코드 구조 가 비교적 복잡 하 다 는 것 이다. 비록 원형 계승 을 통 해 분 층 을 처리 하지만 업무 논리 와 데이터 구조 가 혼합 되 어 두 번 째 문제 인 확장 성과 유연성 이 떨어진다.
폼 검증 과정 을 진지 하 게 분석 하면 두 단계 로 나 눌 수 있다. 어떻게 검증 하고 어떻게 검증 하 는 지.어떻게 검증 하 느 냐 가 데이터 차원 의 문제 이 고, 어떻게 검증 하 느 냐 가 업무 논리 차원 의 문제 이다.
클릭: 원본 보기
정책 모드 에서 대상 과 규칙 을 구분 합 니 다.
어떻게 알고리즘 (데이터 층) 과 대상 (논리 층) 을 분리 시 켜 알고리즘 을 사용 하 는 고객 에 게 독립 적 으로 변화 시 킬 수 있 습 니까?전략 모드 를 도입 합 니 다.
전략 모드 가 무엇 입 니까?
일련의 알고리즘 을 정의 하고 모든 알고리즘 을 봉 하여 서로 바 꿀 수 있 도록 합 니 다.이 모델 은 알고리즘 을 사용 하 는 고객 에 게 독립 적 으로 변화 시 킬 수 있 습 니 다.
즉, 전략 모델 은 대상 자체 와 연산 규칙 을 구분 하고 그 기능 이 매우 강하 다. 왜냐하면 이 디자인 모델 자체 의 핵심 사상 은 대상 을 대상 으로 프로 그래 밍 하 는 다 형 적 인 사상 이기 때문이다.
정책 모드 에 대한 더 많은 정의, 참조
다음은 우 리 는 전략 모델 을 활용 하여 코드 의 층 을 나 누 는 문 제 를 해결 하기 시작 했다.
이상 적 인 플러그 인 호출
코드 를 시작 하기 전에, 우 리 는 더욱 간단 한 방식 으로 플러그 인 을 호출 하 기 를 희망 합 니 다.

  //     form  
  var form = document.getElementById('myForm');

  //         
  var validation = new FormValidator();
  //       
  validation.add(form.username, 'isEmpty', '       s');
  validation.add(form.password, 'minLength: 6', '        6   ');
  validation.add(form.password2, 'isEqualTo: password', '     ');
  validation.add(form.mobile, 'isMobile', '         ');

  //     ，       
  $('#submit-btn').click(function() {
    var errorMsg = validation.start();

    //          ，       
    if(errorMsg){
      console.log(errorMsg);
      return false;
    }
  })

add () 방법 매개 변수 설명
1. 매개 변수 1: 검증 해 야 할 폼 항목 DOM 요소, form [name 속성] 2, 매개 변수 2: 검증 방법, 콜론 으로 분할, 콜론 후의 값 을 방법 으로 하 는 매개 변수 (선택 가능) 3, 매개 변수 3: 오류 알림 정보
작성 검증 함수
우 리 는 전략 모드 를 이용 하여 코드 를 작성 하기 시작 했다.첫 번 째 단 계 는 업무 논리 와 무관 한 검증 함수 알고리즘, 즉 데이터 계층 만 작성 합 니 다.

var VerifyPolicies = {
  isEmpty: function(value, errMsg) {
    if(value == '') return errMsg;
  },

  //     
  minLength: function(value, length, errMsg) {
    if (value.length < length) return errMsg;
  },
  //     
  isMobile: function(value, errMsg) {
    if(!/^1[34578]\d{9}$/.test(value)) return errMsg;
  },
  //     
  isEqualTo: function (value, toDom, errMsg) {
    var toValue = document.getElementById(toDom).value;

    if(value !== toValue) return errMsg;
  }
};

작성 검증 논리

function FormValidator(VerifyPolicy) {
  this.verifyPolicies = VerifyPolicy ? VerifyPolicy : VerifyPolicies;
  //           
  this.validateFn = [];
}

FormValidator.prototype.add = function(dom, rules, errMsg) {
  var _this = this;

  this.validateFn.push(function() {
    var args = [];
    var rule = rules.split(':');
    var ruleName = rule[0];
    var ruleParam = rule[1];
    var value = dom.value;

    args.push(value);
    if(ruleParam) args.push(ruleParam.trim());
    args.push(errMsg);

    //     apply      ，    ES6，      ：
    // return _this.verifyPolicies[ruleName](...args)
    return _this.verifyPolicies[ruleName].apply(null, args);
  })
};

FormValidator.prototype.start = function() {
  var fn = this.validateFn;
  for(var i =0, len = fn.length; ; i++) {
    var msg = fn[i]();
    if(msg) return msg;
  }
};

이로써 전체 폼 검증 은 이미 초보 적 으로 완성 되 었 으 며, 이 방법 위 에 마음대로 방법 을 추가 할 수 있다.
관심 있 는 친 구 는 온라인 HTML / CSS / JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 운행 효 과 를 테스트 합 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.