JavaScript 策略模式封装表单验证库

来源：互联网发布：淘宝摄影棚器材清单编辑：程序博客网时间：2024/06/08 07:31

直接上代码:

<!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>

阅读全文

0 0