码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-09-03 18:45:32      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:register   eth   turn   col   调用   rms   手机号码   function   uft   

<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: 拿走不谢

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

标签:register   eth   turn   col   调用   rms   手机号码   function   uft   

原文地址:http://www.cnblogs.com/vali/p/7470214.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!