表单提交的时候,总是要校验,不同的表单可能校验相同的功能。
为了避免代码重复的复制黏贴,使用策略模式,写出来的代码赏心悦目,且可扩展,还可以作为插件到处使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>策略模式_表单验证</title>

</head>

<body>

    <form id="registerFrom" method="post" action="">

        请输入用户名: <input type="text" name="userName" /> <br/>

        请输入密码: <input type="text" name="password" /> <br/>

        请输入手机号码: <input type="text" name="phoneNumber" /> <br/>

        <button>提交</button>

    </form>

    <script>

        // 对象字面量

        var strategies = {

            isNonEmpty: function(value, errorMsg) {

                if (value === '') {

                    return errorMsg;

                };

            },

            minLength: function(value, length, errorMsg) {

                if (value.length < length) {

                    return errorMsg;

                };

            },

            isMobile: function(value, errorMsg) {

                if (!/(^1[7|3|5|8][0-9]{9}$)/.test(value)) {

                    return errorMsg;

                };

            },

            isSpace: function(value, errorMsg) {

                if([...value].every( item => {

                    return item === ' ';

                })) {

                    return errorMsg;

                };

            }

        };

        // 校验表单类

        var Validator = function() {

            this.catch = [];

        };

        Object.assign(Validator.prototype, {

            add: function(dom, rules, errorMsg) {

                var _self = this;

                for (var i = 0, rule; rule = rules[i ++]; ) {

                    (function(rule) {

                        var ary = rule.strategy.split(':');

                        _self.catch.push(function() {

                            var strategy = ary.shift();

                            ary.unshift(dom.value);

                            ary.push(rule.errorMsg);

                            return strategies[strategy].apply(dom, ary);

                        });

                    })(rule);

                };

            },

            start: function() {

                for (var i = 0, validatorFunc; validatorFunc = this.catch[i ++]; ) {

                    var msg = validatorFunc();

                    if (msg) {

                        return msg;

                    };

                };

            }

        });

        // test

        // 校验方法封装

        var validataFunc = function() {

            var validator = new Validator();

            validator.add(registerFrom.userName, [{

                strategy: 'isSpace',

                errorMsg: '用户名不能全为空!'

            },{

                strategy: 'minLength:10',

                errorMsg: '用户名长度不能少于10个字符!'

            }]);

            validator.add(registerFrom.password, [{

                strategy: 'isSpace',

                errorMsg: '密码不能全为空!'

            },{

                strategy: 'minLength:6',

                errorMsg: '密码长度不能小于6个字符!'

            }]);

            validator.add(registerFrom.phoneNumber, [{

                strategy: 'isMobile',

                errorMsg: '手机号码格式不对!'

            }]);

            var errMsg = validator.start();

            return errMsg;

        };

        var registerFrom = document.querySelector('#registerFrom')

        registerFrom.onsubmit = function() {

            var errorMsg = validataFunc();

            if (errorMsg) {

                console.log(errorMsg);

                return false;

            };

        };

    </script>

</body>

</html>

使用对象字面量和闭包和apply来实现策略模式的,很不错

JavaScript设计模式 - 策略模式(表单验证)的更多相关文章

  1. javascript 设计模式-----策略模式

    在<javascript设计模式>中,作者并没有向我们介绍策略模式,然而它却是一种在开发中十分常见的设计模式.最常见的就是当我们遇到一个复杂的表单验证的时候,常常需要编写一大段的if和el ...

  2. JavaScript：综合案例-表单验证

    综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...

  3. javascript:正则表达式、一个表单验证的例子

    本文内容: 正则表达式 正则表达式的使用方法 正则表达式的特殊匹配字符 正则表达式修饰符 利用正则表达式进行表单验证的例子 首发日期:2018-05-13 正则表达式: 正则表达式的使用方法: 首先创 ...

  4. javascript设计模式——策略模式

    前面的话 在程序设计中,常常遇到类似的情况,要实现某一个功能有多种方案可以选择.比如一个压缩文件的程序,既可以选择zip算法,也可以选择gzip算法.这些算法灵活多样,而且可以随意互相替换.这种解决方 ...

  5. javascript设计模式-策略模式

    策略模式笔记   将定义的一组算法封装起来,使其相互之间可以替换.   封装的算法具有一定独立性,不会随客户端变化而变化.   与状态模式异同?     1. 结构上看,它与状态模式很像,也是在内部封 ...

  6. javascript中常见的表单验证项

    1.不能超过20个字符 <body> <form name=a onsubmit="return test()"> <textarea name=&q ...

  7. 吴裕雄--天生自然 JAVASCRIPT开发学习： 表单验证

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  9. jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

随机推荐

  1. c3p0死锁

    1.APPARENT DEADLOCK!!! Creating emergency threads for unassigned pending tasks! 抛出以下异常信息: com.mchang ...

  2. Android 系统工具类

    系统工具类 public class systemUtil { //隐藏ipad底部虚拟按键栏 @RequiresApi(api = Build.VERSION_CODES.KITKAT) publi ...

  3. JavaScript大杂烩9 - 理解BOM

    毫无疑问,我们学习JavaScript是为了完成特定的功能.在最初的JavaScript类型系统中,我们已经分析过JavaScript在页面开发中充当着添加逻辑的角色,而且我们知道JavaScript ...

  4. Django2.0.1开发框架搭建

    1.使用vs2017创建空白django项目 2.右键python环境的env---安装python包  升级django到2.0.1和setuptools到38.4.0版本,具体环境如下: 3.配置 ...

  5. 谷歌浏览器javascript错误提示插件

    JavaScript-Errors-Notifier_v2.1.7 下载地址 安装方法: http://chromecj.com/utilities/2014-09/181.html 设置方式:

  6. 利用java webservice调用天气预报实践

    最近要和其他业务系统进行数据交换,选择了webservice方案,于是查了一下网上的用法.首先是做一个天气的查询例子,看着挺简单,可实际动手做起来发现坑很多,费了半天劲终于调通了,于是记录下来. 1, ...

  7. 【学习笔记】python 进阶特性

    __slots__魔法 在Python中,每个类都有实例属性.默认情况下Python用一个字典来保存一个对象的实例属性.这非常有用,因为它允许我们在运行时去设置任意的新属性. 然而,对于有着已知属性的 ...

  8. pandas中DataFrame对象to_csv()方法中的encoding参数

    当使用pd.read_csv()方法读取csv格式文件的时候,常常会因为csv文件中带有中文字符而产生字符编码错误,造成读取文件错误,在这个时候,我们可以尝试将pd.read_csv()函数的enco ...

  9. 关于前缀和，A - Hamming Distance Sum

    前缀和思想 Genos needs your help. He was asked to solve the following programming problem by Saitama: The ...

  10. JS进阶1

    一 表格案例 二 onchange事件(二级联动) 三 onmouse事件 四 事件委派 五  作用域链 一表格案例 <!DOCTYPE html> <html lang=" ...