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

<!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. Linux常用基本命令：三剑客命令之-awk内置变量与自定义变量

    AWK中,变量分为两种:内置变量与自定义变量. 常见的内置变量有: FS:输入字段分隔符, 默认为空白字符 OFS:输出字段分隔符, 默认为空白字符 RS:输入记录分隔符(输入换行符), 指定输入时的 ...

  2. canvas-star6-drawMoon.html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Azure 标准与高级托管磁盘存储的相互转换

    托管磁盘提供两种存储选项:高级(基于 SSD)和标准(基于 HDD). 它允许基于性能需求在这两个选项之间轻松切换,并保障最短停机时间. 非托管磁盘不具备此功能. 但可以轻松转换为托管磁盘,以便在这两 ...

  4. Postgresql_根据执行计划优化SQL

    执行计划路径选择 postgresql查询规划过程中,查询请求的不同执行方案是通过建立不同的路径来表达的,在生成许多符合条件的路径之后,要从中选择出代价最小的路径,把它转化为一个计划,传递给执行器执行 ...

  5. HTML 5 <input> list 属性

    定义和用法 list 属性引用数据列表,其中包含输入字段的预定义选项. 可以用来做关联搜素

  6. 3.8Python数据处理篇之Numpy系列(八)---Numpy的梯度函数

    目录 目录 前言 (一)函数说明 (二)一维数组的应用 (三)多维数组的应用 目录 前言 梯度函数,其中的梯度也就是斜率,反映的是各个数据的变化率.在numpy中只有一个梯度函数. (一)函数说明 ( ...

  7. hubilder打包+C#服务端个推服务实现

    关于推送鼓捣了好长时间,这里不再写helloworld了,只讲里面遇到的问题. 1.关于苹果开发者平台上的注册 网上很多的教程,只要按照步骤来设置就行了,在 iOS证书(.p12)和描述文件(.mob ...

  8. 请教MAC OS下PHP的mcrypt怎么安装

    安装方法一: 通过Homebrew安装mcrypt,安装成功 [Shell] 纯文本查看 复制代码 brew install mcrypt MCrypt是一个功能强大的加密算法扩展库,它包括有22种算 ...

  9. jweixin-1.1.0.js微信接口“分享给朋友”文字和图片配置

    在npm官网找到了:微信官方 js-sdk CommonJS 版https://www.npmjs.com/package/weixin-js-sdk 步骤一:引入JS文件在需要调用JS接口的页面引入 ...

  10. ST_Geometry效率的测试与分析

    测试环境 数据库:Oracle11g R1(11.1.0.6) 64Bit 中间件:ArcSDE10 (64Bit) 数据情况:点数据(point,231772条记录),面数据(poly,12条记录) ...