js表单验证策略模式

最新推荐文章于 2023-03-29 15:51:50 发布

woochon

最新推荐文章于 2023-03-29 15:51:50 发布

阅读量558

点赞数

分类专栏： js 文章标签： js表单 js设计模式策略模式

本文链接：https://blog.csdn.net/woochon/article/details/88807355

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

js表单验证，使用设计模式的策略设计模式封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action='' id = 'registerForm' method='post'>
    请输入用户名：<input type='text' name='userName' />
    请输入密码：<input type='text' name = 'password' />
    请输入手机号码：<input type='text' name = 'phoneNumber' />
    <input type="submit" value="提交">
</form>
</body>
<script>
    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;
    }
</script>
</html>

使用时在strategies添加策略方法，再使用validator.add(dom,[{},{}…])添加strategies的策略及提示信息。

es6封装

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;
        }
    }
};


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;

woochon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js表单验证策略模式

js表单验证，使用设计模式的策略设计模式封装<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form action='' id ...
复制链接

扫一扫