jsフォーム検証ポリシーモード

jsフォーム検証、設計モードを使用したポリシー設計モードパッケージ

    
    



          ：
         ：
           ：
    



    const strategies = {
        isNonEmpty:function(value,errorMsg){
            if(value===''){
                return errorMsg;
            }
        },
        minLength:function(value,length,errorMsg){
            if(value.length<length){
                return errorMsg;
            }
        },
        maxLength:function(value,length,errorMsg){
            if(value.length>length){
                return errorMsg;
            }
        },
        isMobile:function(value,errorMsg){
            if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){
                return errorMsg;
            }
        }
    };

    const Validator = function(){
        this.cache= [];
    };
    Validator.prototype.add =function(dom,rules){
        var self = this;
        for(var i=0,rule;rule = rules[i++];){
            (function(rule){
                var strategyAry = rule.strategy.split(':');

                var errorMsg = rule.errorMsg;
                self.cache.push(function(){
                    var strategy = strategyAry.shift();
                    console.log(dom);
                    strategyAry.unshift(dom.value);
                    strategyAry.push(errorMsg);
                    return strategies[strategy].apply(dom,strategyAry);
                });
            })(rule)
        } //end for
    };

    Validator.prototype.start = function(){
        for(var i=0,validatorFunc;validatorFunc = this.cache[i++];){
            var errorMsg =validatorFunc();
            if(errorMsg){
                return errorMsg;
            }
        }
    };
    
    var registerForm = document.getElementById('registerForm');
    var validataFunc = function(){
        var validator =new Validator();
        validator.add(registerForm.userName,[
            {
                strategy:'isNonEmpty',
                errorMsg:'       '
            },
            {
                strategy:'minLength:6',
                errorMsg:'         6'
            },
            {
                strategy:'maxLength:10',
                errorMsg:'         10'
            }
        ]);
        validator.add(registerForm.password,[
            {
                strategy:'minLength:6',
                errorMsg:'        6'
            }
        ]);
        validator.add(registerForm.phoneNumber,[
            {
                strategy:'isMobile',
                errorMsg:'         '
            }
        ]);

        var errorMsg =validator.start();
        return errorMsg;
    };
    registerForm.onsubmit = function(e){
        e.preventDefault();
        var errorMsg =validataFunc();
        if(errorMsg){
            alert(errorMsg);
            return false;
        }
        return false;
    }

使用時にstrategiesにポリシーメソッドを追加し、validatorを使用します.add(dom,[{},{}...])strategiesのポリシーおよびプロンプト情報を追加します.
Es 6パッケージ

const strategies = {
    isNonEmpty:function(value,errorMsg){
        if(value===''){
            return errorMsg;
        }
    },
    minLength:function(value,length,errorMsg){
        if(value.lengthlength){
            return errorMsg;
        }
    },
    isMobile:function(value,errorMsg){
        if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){
            return errorMsg;
        }
    }
};


class Validator{
    constructor(){
        this.cache = [];
        this.strategies=strategies;
    }
    add(dom,rules){
        let self = this;
        for(let i=0,rule;rule = rules[i++];){
            (function(rule){
                let strategyAry = rule.strategy.split(':');

                let errorMsg = rule.errorMsg;
                self.cache.push(function(){
                    let strategy = strategyAry.shift();
                    console.log(dom);
                    strategyAry.unshift(dom.value);
                    strategyAry.push(errorMsg);
                    return strategies[strategy].apply(dom,strategyAry);
                });
            })(rule)
        }
    }
    start(){
        for(let i=0,validatorFunc;validatorFunc = this.cache[i++];){
            let errorMsg =validatorFunc();
            if(errorMsg){
                return errorMsg;
            }
        }
    };
}

export default Validator;