给某个文本框添加多种校验规则

最新推荐文章于 2024-06-19 11:48:18 发布

weixin_34358365

最新推荐文章于 2024-06-19 11:48:18 发布

阅读量554

点赞数

文章标签： java c#

原文链接：http://www.cnblogs.com/vali/p/7470214.html

版权

<html>
    <head>
        <meta charset="uft-8">
    </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>
        <script>
            /***************策略对象*************/
            var strategies = {
                isNotEmpty:function(value,errorMsg){
                    if(value === ''){
                        return errorMsg;
                    }
                },
                minLength:function(value,length,errorMsg){
                    if(value.length<length){
                        return errorMsg;
                    }
                },
                isMobile:function(){
                    if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){
                        return errorMsg;
                    }
                }
            }
            /***************validator类***************/
            var  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.solit(':');
                        var errorMsg = rule.errorMsg;
                        
                        self.cache.push(function(){
                            var strategy = strategyAry.shift();
                            strategyAry.unshift(dom.value);
                            strategyAry.push(errorMsg);
                            
                            return strategies[strategy].apply(dom,strategyAry);
                        })
                    })(rule);
                }
            }
            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 validatorFunc = function(){
                var validator = new Validator();
                
                validator.add(registerForm.userName,[{
                    strategy:'isNotEmpty',
                    errorMsg:'用户名不能为空'
                },{strategy:'minLength: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(){
                var errorMsg = validatorFunc();
                if(errorMsg){
                    alert(errorMsg);
                    return false;
                }
            }
        </script>
    </body>
</html>

end: 拿走不谢

转载于:https://www.cnblogs.com/vali/p/7470214.html

weixin_34358365

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
给某个文本框添加多种校验规则

<html> <head> <meta charset="uft-8"> </head> <body> <form action="" id="registerForm" method="post"> 请输入用户名：<input ty...
复制链接

扫一扫