JavaScript 策略模式封装表单验证库_js策略模式验证表单-优快云博客

本文链接：https://blog.youkuaiyun.com/AloneAsFoam/article/details/78720557

直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="form">
        <p>用户名:<input type="text" name="userName" /></p>
        <p>密码:<input type="password" name="userWord"/></p>
        <p>手机:<input type="tel" name="userPhone"/></p>
        <p><input type="submit" value="提交"></p>
    </form>
</body>
<script>
    var form = document.getElementById('form');
    //定义验证算法类
    var autoForm = {
        isNonEmpt : function(val,msg){
            if(val == ''){
                return msg;
            }
        },
        minLength : function (val,length,msg) {
            if(val.length<length){
                return msg;
            }
        },
        isPhone : function (val,msg) {
            if(!/(^1[0-9]{10}$)/.test( val )){
                return msg;
            }
        }

	//这里可以封装无数个验证算法

    };

    var Validator = function(){
        this.cache = [];  //保存检验规则
    };

    Validator.prototype.add = function(dom,rule){
        var self = this;
        for(var i=0,rule;rule = rule[i++];){
            (function(rule){
                var strateguAry = rule.strategy.split(':'),//将带有值的参数分开
                    errorMsg = rule.errorMsg;
                self.cache.push(function(){
                    var strategy = strateguAry.shift();//获取验证算法的名称
                    strateguAry.unshift(dom.value);//获取将要验证的文本
                    strateguAry.push(errorMsg);
                    return autoForm[strategy].apply(dom,strateguAry);//借用autoForm的方法进行验证
                })
            })(rule)
        }
    };
    Validator.prototype.start = function(){
        for(var i=0,fun;fun = this.cache[i++];){
            var msg = fun();
            if(msg){
                return msg;
            }
        }
    }

    //定义执行算法类,并返回验证结果
    var validate = function(){
        var validator = new Validator();
        validator.add(form.userName,[{
            strategy:'isNonEmpt',
            errorMsg:'用户名不能为空!'
        },{
            strategy:'minLength:2',
            errorMsg:'用户名最少两个字符!'
        }]);
        validator.add(form.userWord,[{
            strategy:'isNonEmpt',
            errorMsg:'密码不能为空!'
        },{
            strategy:'minLength:6',
            errorMsg:'密码最少6个字符!'
        }
        ]);
        validator.add(form.userPhone,[{
            strategy:'isNonEmpt',
            errorMsg:'手机号码不能为空!'
        },{
            strategy:'minLength:6',
            errorMsg:'手机号码格式不正确!'
        }
        ]);
        var errorMsg = validator.start();
        return errorMsg;
    };
    //表单提交
    form.onsubmit = function(){
        var errorMsg = validate();
        if(errorMsg){
            alert(errorMsg);
            return false;
        }else{
            alert('提交成功!')
        };
    }
</script>
</html>