JavaScript 정책 모드를 사용하여 양식 검증 방법

5660 단어 JS정책 모드양식 검사

개요


웹 프로젝트에서 로그인, 등록 등 기능은 모두 폼 제출을 필요로 한다. 사용자의 데이터를 백그라운드에 제출하기 전에 전단은 일반적으로 할 수 있는 검사를 해야 한다. 예를 들어 기입 여부, 기입 길이, 비밀번호가 규범에 부합되는지 등이다. 전단 검사는 규범에 맞지 않는 폼 제출을 피할 수 있다.
만약 우리가 표를 가지고 있다면, 검증 논리는 다음과 같다.
  • 사용자 이름이 비어 있지 않습니다
  • 비밀번호 길이가 6자리보다 낮지 않습니다
  • 핸드폰 번호가 격식에 맞다

    • 정책 모드를 사용하지 않은 양식 검증


    정책 모드를 사용하지 않을 때 가장 먼저 생각나는 검증 모드는 다음과 같습니다.
    
<body>
    <form id="registerForm">
        <label for="username"> ：<input type="text" name="username"></label>
        <label for="password"> ：<input type="password" name="password"></label>
        <label for="phone"> ：<input type="text" name="phone"></label>
    </form>
    <script>
        const form = document.querySelector('.registerForm');
        form.onsubmit = function(){
            if(form.username.value === ''){
                alert(' ')
                return;
            }
            if(form.password.value.length < 6){
                alert(' 6 ')
                return;
            }
            if(!/(^1[3|5|8][0-9]{9}$)/.test(form.phone.value)){
                alert(' ')
                return;
            }
        }
    </script>
</body>
    이러한 코드 작성 방식은 매우 흔하지만, 그 단점 역시 매우 뚜렷하다.
  • onsubmit 함수가 너무 방대하고 if-else를 많이 포함하여 모든 규칙을 덮어씁니다
  • onsubmit 함수는 탄성이 부족하기 때문에 새로운 검사 규칙에 들어가려면 함수의 내용을 바꾸어 실현하고 개방-폐합 원칙을 위반해야 한다
  • 코드의 복용성이 비교적 좋지 않기 때문에 만약 표를 하나 더 쓰면 중복된 코드를 많이 복사해야 한다

    • 정책 모드 최적화 사용


    먼저 체크 함수를 하나의 객체로 봉인합니다.
    
const strategies = {
    empty(value, errMsg){
        if(value.length === 0){
            return errMsg;
        }
    },
    minLength(value, len, errMsg){
        if(value.length < len){
            return errMsg;
        }
    },
    isMobile(value, errMsg){
        if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){
            return errMsg;
        }
    }
}
    유효성 검사 규칙을 대상 양식에 추가하는 데 사용되는 Validator 클래스도 있습니다. 이 클래스의 사용법은 다음과 같습니다.
    
const validate = function(){
    const validator = new Validator();
    validator.add(Form.userName, 'empty', ' ');
    validator.add(Form.password, 'minLength:6', ' 6 ');
    validator.add(Form.phone, 'isMobile', ' ');
    const errMsg = validator.start();
    return errMsg;
}
    코드에서 보듯이validator 실례는add 방법이 있는데 3개의 파라미터를 수신한다. 첫 번째는 검증이 필요한 폼 실례이고 두 번째는 검증 방법이며 사칭 뒤에 전송된 파라미터이다.세 번째는 통과되지 않은 오류 알림 정보를 검증하는 것입니다.
    start 방법, 검사를 시작하는 데 사용됩니다. 통과하지 않으면 통과하지 않은 알림 정보를 되돌려줍니다. 이후 논리에서 처리할 수 있습니다
    Validator 클래스 작성:
    
class Validator {
    constructor(){
        this.rules = [];
    }
    add(elem, rule, err){
        const args_arr = rule.split(":");
        this.rules.push(()=>{
            const handler = args_arr.shift();
            args_arr.unshift(elem.value);
            args_arr.push(err);
            return strategies[handler].apply(elem, args_arr)
        })
    }
    start(){
        let errmsg = []
        for(let i = 0; i < this.rules.length; i++ ){
            const err = this.rules[i]();
            if(err){
                errmsg.push(err)
            }
        }
        return errmsg.join(",");
    }
}
    정책 모드를 사용하면 우리는 설정된 방식으로 표의 검사를 완성했다. 이러한 규칙은 이후의 어떤 검사 표에도 사용할 수 있고 수정과 복용이 더욱 편리하다
    단일 테이블 항목에 여러 개의 검증 규칙 추가
    우리의 코드는 현재 단점이 하나 있다. 바로 특정한 폼 항목에만 단일 검증 규칙을 부여할 수 있고 하나의 폼에 여러 개의 검증 규칙을 실현할 수 없기 때문에 코드는 최적화된 공간이 있다.
    
class Validator{
    // ・・・
    add(elem, rules){
        rules.forEach(rule => {
            const args_arr = rule.strategy.split(":");
            this.rules.push(()=>{
                const handler = args_arr.shift();
                args_arr.unshift(elem.value);
                args_arr.push(rule.errMsg);
                return strategies[handler].apply(elem, args_arr)
            })
        });
    }
    // ・・・
}

const validate = function(){
    const validator = new Validator();
    validator.add(Form.username,[{
        strategy: 'empty',
        errMsg: ' '
    }]);
    validator.add(Form.password, [{
        strategy: 'minLength:6',
        errMsg: ' 6 '
    }]);
    validator.add(Form.phone, [{
        strategy: 'isMobile',
        errMsg: ' '
    }, {
        strategy: 'empty',
        errMsg: ' '
    }]);
    const errMsg = validator.start();
    return errMsg;
}
    단지 전참할 때 하나의 대상 수조에 전입하고add 함수에 해당하는 수조 처리 논리를 추가하면 된다

    전략 모델의 장점


    장점:
  • 다중 조건 선택 문장을 피한다
  • 개폐 원칙을 실현하여 함수의 사용을 더욱 쉽게 전환하고 이해하기 쉬우며 확장하기 쉽다
  • 코드 복용 정도를 높인다

    • 총결산


    Peter Norvig는 함수가 일등 대상인 언어에서 전략 모델은 스텔스이고strategy는 값이 함수인 변수라고 말했다.사실은 봉인된 정책 함수를 매개 변수로 삼아 사용하는 target에 전달하고 target에 의해 호출되는 과정이다. 좋은 정책 모델을 사용하면 이 모델에 대해 더욱 깊은 이해를 할 뿐만 아니라 함수를 사용하는 장점도 알 수 있다.
    다음은 자바스크립트 정책 모드를 사용하여 폼의 상세한 내용을 검증하는 방법입니다. 자바스크립트에 대한 더 많은 자료는 저희의 다른 관련 글에 주목하십시오!
    백준 18870 좌표 압축
    자릿수 더하기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage