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

<!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. 安卓开发----TextView控件属性列表（转）

    文章原地址: http://wwzcraig.blog.163.com/blog/static/64622969201373184343118/ android:autoLink设置是否当文本为URL ...

  2. UML类图关系图解

    一.类结构 在类的UML图中,使用长方形描述一个类的主要构成,长方形垂直地分为三层,以此放置类的名称.属性和方法. 其中, 一般类的类名用正常字体粗体表示,如上图:抽象类名用斜体字粗体,如User:接 ...

  3. 如何猜出 Y combinator

    先约定几个记号: 定义用一个冒号加等号表示":=", 表达式全等用两个等号表示"==", 归约意义上的相等用一个等号表示"="," ...

  4. ws协议的配置

    server { listen 80; server_name 域名或IP; rewrite ^(.*)$ https://$host$1 permanent; } server { listen 4 ...

  5. Linux删除文件实现回收站功能

    转载于 https://blog.csdn.net/u014057054/article/details/52126494 从事过服务器维护的人都知道rm.rm -rf 的厉害,执行起来一点也不马虎, ...

  6. Windows：Oracle 11g 备份脚本

    @echo off echo ================================================ echo Windows环境下Oracle数据库的自动备份脚本 echo ...

  7. PLSQL操作Oracle创建用户和表

    1.打开PLSQL,填写用户名和密码(初始有两个用户sys和system,密码是自己安装oracle数据库时定的),Database选择ORCL(默认数据库,oracle中创建的用户就像是mysql中 ...

  8. Vim和Vi的常用命令

    Vim 文本编辑器 1.Vim 和 Vi: 两者都是多模式编辑器: Vim 是 Vi 升级版,再兼容 Vi 所有指令的同时增加了一些新功能支持: 特点: 语法加亮:使用不同的颜色加亮代码: 多级撤销: ...

  9. nginx服务器开启缓存、反向代理

    一.反向代理配置 1.反向代理服务器配置如下 反向代理就是需要这一行proxy_pass来完成.当我们要访问后端web服务器的时候,我们只需要访问代理服务器就可以了,此时代理服务器就充当后端web服务 ...

  10. Django admin 的模仿流程