js策略模式

最新推荐文章于 2024-02-23 10:53:12 发布

江呱呱

最新推荐文章于 2024-02-23 10:53:12 发布

阅读量214

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_46500485/article/details/108753114

版权

js 专栏收录该内容

76 篇文章 2 订阅

订阅专栏

js策略模式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        form {
            width: 500px;
            margin: 0 auto;
            height: 200px;
            padding: 20px 0;
        }
        
        .item {
            height: 80px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .item label {
            flex-basis: 100px;
        }
        
        .item input {
            flex-basis: 400px;
            box-sizing: border-box;
        }
        
        .item span {
            flex-basis: 500px;
            font-size: 12px;
            text-align: center;
            height: 30px;
        }
    </style>
</head>

<body>
    <form>
        <div class="item">
            <label>用户名</label> <input id="usernameInput" type="text" /> <span id="usernameTips"></span>
        </div>
        <div class="item">
            <label>密码</label> <input id="passwordInput" type="password" /> <span id="passwordTips"></span>
        </div>
    </form>
    <script>
        var usernameInput = document.getElementById("usernameInput");
        var usernameTips = document.getElementById("usernameTips");
        var passwordInput = document.getElementById("passwordInput");
        var passwordTips = document.getElementById("passwordTips");
		//这个变量里面是一个立即执行函数  然后立即执行函数的返回值是一个对象  对象里面有两个函数  函数由于闭包的原因  可以使用上方定义的对象的函数   
        var Strategy = (function() {
            var _S = {
                checkWord7T19(value) {
                    // 定义正则表达式
                    var checkWord7T19 = /^[a-zA-Z_]\w{6,18}$/;
                    return checkWord7T19.test(value) ? "" : "请输入长度为7~19位的组合字符，由数字、字母、下划线组成，不能以数字开头"
                },
                checkWord7T16(value) {
                    // 定义正则表达式
                    var checkWord7T16 = /^[a-zA-Z_]\w{6,15}$/;
                    return checkWord7T16.test(value) ? "" : "请输入长度为7~16位的组合字符，由数字、字母、下划线组成，不能以数字开头"
                }
            }
            return {
                // 允许增加更多的正则表达式
                add(name, fn) {
                    _S[name] = fn;
                },
                // 使用
                use(name, value) {
                    return _S[name](value)
                }
            }
        })();

        // 用户如果无法找到对应的满意的策略 我们也可以允许用户自己添加
        Strategy.add("checkemail", function(value) {
            var reg = /^\w{1,20}@\w{2,5}\.\w{2,4}$/;
            return reg.test(value) ? "" : "请输入格式正确的邮箱";
        });

        // 绑定 onblur 事件
        usernameInput.onblur = function() {
            // 获取用户输入的数据
            var str = Strategy.use("checkemail", this.value);
            // 验证
            if (str) {
                usernameTips.innerHTML = str;
                usernameTips.style.color = "red";
                return;
            }
            usernameTips.style.color = "green";
            usernameTips.innerHTML = "√";
        }

        passwordInput.onblur = function() {
            // 获取用户输入的数据
            var str = Strategy.use("checkWord7T19", this.value);
            // 验证
            if (str) {
                passwordTips.innerHTML = str
                passwordTips.style.color = "red";
                return;
            }
            passwordTips.style.color = "green";
            passwordTips.innerHTML = "√";
        }


        // 第一个问题： 改代码 不好改 
        // 第二个问题： 如果有多个表单在同一个页面 正则表达式没法复用
    </script>
</body>

</html>