乐趣区

关于设计模式:使用策略模式实现表单验证

jiezi

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

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(){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;
        }
    }
}
退出移动版