javascript设计模式(一)策略模式Strategy

最新推荐文章于 2025-12-15 15:15:21 发布

转载最新推荐文章于 2025-12-15 15:15:21 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dangou/p/7421635.html

文章标签：

#javascript #设计模式 #ViewUI

本文介绍了一种使用策略模式封装不同表单验证算法的方法，包括非空、数字和电话号码格式验证，通过实例展示了如何在JavaScript中实现和调用这些验证策略。

1.将定义的一组算法封装起来，使其相互之间可以替换。封装的算法具有一定的独立性，不会随客户端的变化而变化.

表单验证

var InputStrategy=function(){
        var strategy={
            notNull:function(value){
                return /\s+/.test(value)?console.log("请输入内容"):'';
            },
            number:function(value){
                return /^[0-9]+(\.[0-9]+)?$/.test(value)?"":console.log("请输入数字");
            },
            phone:function(value){
                return /^\d{3}\-\d{8}$|^\d{4}\-\d{7}$/.test(value)?"":console.log("请输入正确的电话号码格式!")
            }
        }
        return{
            check:function(type,value){
                //去除首位空白字符\
                value=value.replace(/^\s+|\s+$/g,'');
                return strategy[type]?strategy[type](value):console.log("没有该类型的检测方法");
            },
            addStrategy:function(type,fn){
                strategy[type]=fn;
            }
        }
    }()
    //引用
    var tag=document.getElementById("cont");
    var btn=document.getElementById("btn");
    btn.onclick=function(event){
        InputStrategy.check("number",tag.value)
    }

转载于:https://www.cnblogs.com/dangou/p/7421635.html