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

<!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. css的一些细节

    1.中文符号居中效果 对于动态输出文字可以不用在意,某些页面可能会有类似提示文案的地方,用英文标点符号,对于居中效果比较友好. 2.元素的上下间距 布局的时候从上往下开始写页面,一般都是写下一个的元素 ...

  2. GIS基础知识

    投影转换 若两者地理坐标系不一致,需要设置七参数进行转换. 不同地方,七参数大小不一样,需要通过计算得到.

  3. 微信小程序request同步请求

    今天在搞微信小程序的时候顺手用了async,await死活不起作用,后来查了一下子,竟然不支持,那没办法就换了一种实现wx.request同步请求的方案 祭出promise来搞一搞,下面直接贴代码,简 ...

  4. 【读书笔记】iOS-使用SQL数据库保存信息

    使用BLOB字段来保存图片是不是一个好的方法还存在争议,小图片除外.更常用的方法是将图片保存为一个文件,然后只在数据中保存图片文件的元数据,比如文件的路径.但是,如果你想把数据文件(初始数据)打包成一 ...

  5. 我的Java之旅 第五课 JAVA 语言语法 集合

    JAVA集合只能存放引用类型的的数据,不能存放基本数据类型,int 可以用 Integer代替. 一.集合接口  1.  Iterable<E> 实现这个接口允许对象成为 "fo ...

  6. 我的Java之旅 第三课 从Applet到JSP

    一.Applet   Applet是一种特殊的Java程序,它本身不能单独运行(因为本身没有main()),需要嵌入在一个HTML文件中,借助浏览器或者appletviewer来解释执行.   App ...

  7. 网页一键加入QQ群

    三步简单实现功能:网页提供加入qq群按钮  让他人一键加入qq群 第一步:进入qq群官网:http://qun.qq.com/join.html 第二步:选择需要加入的群并生成网页代码 第三步:在网页 ...

  8. python爬虫之Beautifulsoup学习笔记

    相关内容: 什么是beautifulsoup bs4的使用 导入模块 选择使用解析器 使用标签名查找 使用find\find_all查找 使用select查找 首发时间:2018-03-02 00:1 ...

  9. CSS| 框模型-border

    CSS 边框属性

  10. Linksys EA6500刷ddwrt成功记

    网上刷Linksys EA6500的资料不多,然后又绕了好多个弯子,自己记录备忘. 首先EA6500有两个版本v1和v2,对应的固件不同. 区分方法: 1.v1的背后是两个颜色一样的usb2.0 2. ...