js使用策略模式实现表单验证

最新推荐文章于 2024-04-17 04:52:27 发布

[email protected]

最新推荐文章于 2024-04-17 04:52:27 发布

阅读量376

点赞数

分类专栏：设计模式文章标签：设计模式

本文链接：https://blog.csdn.net/w440149517/article/details/114999854

版权

设计模式专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用策略模式实现表单验证

1.什么是策略模式

策略模式说起来很高大上，其实现实生活中很常见。比如，你要从老家去北京故宫游玩，可选的出行方式有坐火车、开车自驾、坐飞机等几种方式，
至于选择哪种出现方式要看自己的经济能力和个人需求，而选择的过程就是一种策略模式。

2.应用例子-表单验证

在js代码中如何实现策略模式？

1.你得有一堆可供选择的策略strategies = [one, two, three,...]
2.根据不同的场景Context使用不同策略。

下面我使用策略模式完成登录界面的表单验证,如果不符合规则，进行弹窗提示

在这里插入图片描述

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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
    <h1>登陆</h1>
    <form id="registerForm">
        <span>请输入用户名：</span><input type="text" name="userName" placeholder="不能为空"/>
        <br />
        <span>请输入密码：</span><input type="text" name="password" placeholder="最少6位"/>
        <br />
        <span>请输入手机号码：</span><input type="text" name="phoneNumber" placeholder="请输入正确的手机号码"/>
        <br />
        <button>登陆</button>
    </form>
</body>
<script src="./index.js"></script>
</html>

1.把策略准备好，策略就是校验规则

const strategies = {
    isNoEmpty: function(value, errorMsg) {
        return value ? '' : errorMsg
    },
    minLength: function(value, errorMsg,length) {
        return value && value.length >= length ? '' : errorMsg
    },
    isMoble: function(value, errorMsg) {
        return /(^1[3|5|8][0-9]{9}$)/.test(value) ? '' : errorMsg;
    }
}

2.再写一个Context

// 校验类
const Validator = function(){
    this.rules = [];// 校验规则
}
// 添加校验规则到校验池
Validator.prototype.add = function(dom, rule, errorMsg){
    const key = Object.keys(rule)[0];
    const value = rule[key]
    this.rules.push(function(){
        // 执行key对应策略
        return strategies[key].apply(null, [dom.value, errorMsg, value])
    })
}
// 执行校验池
Validator.prototype.run = function(){
    for(let i = 0; i < this.rules.length; i ++){
        const msg = this.rules[i]()
        if (msg) return msg;
    }
}

3.业务代码

// 进行校验
const validateLoginData = function(){
    const validator = new Validator()
    validator.add(document.getElementsByName('userName')[0], {isNoEmpty: true}, '用户名不能为空')
    validator.add(document.getElementsByName('password')[0], {minLength: 6}, '密码最少6位')
    validator.add(document.getElementsByName('phoneNumber')[0], {isMoble: true}, '手机号不正确')
    return validator.run();
}
// 绑定事件
window.onload = function(){
    document.getElementById('registerForm').onsubmit = function(){
        console.log('xxxx')
        var errorMsg = validateLoginData()
        if(errorMsg){
            alert(errorMsg)
            return false;
        }
    }
}

[email protected]

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js使用策略模式实现表单验证

使用策略模式实现表单验证1.什么是策略模式策略模式说起来很高大上，其实现实生活中很常见。比如，你要从老家去北京故宫游玩，可选的出行方式有坐火车、开车自驾、坐飞机等几种方式，至于选择哪种出现方式要看自己的经济能力和个人需求，而选择的过程就是一种策略模式。2.应用例子-表单验证在js代码中如何实现策略模式？1.你得有一堆可供选择的策略strategies = [one, two, three,...]2.根据不同的场景Context使用不同策略。下面我使用策略模式完成登录界面的表单验证,如果
复制链接

扫一扫