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

<!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. Flask的Context(上下文)学习笔记

    上下文是一种属性的有序序列,为驻留在环境内的对象定义环境.在对象的激活过程中创建上下文,对象被配置为要求某些自动服务,如同步.事务.实时激活.安全性等等. 比如在计算机中,相对于进程而言,上下文就是进 ...

  2. 网络安全之sql注入

    1.何为Sql注入? 所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.具体来说,它是利用现有应用程序,将(恶意的)SQ ...

  3. 安装 kubernetes v1.11.1

    kubernetes 版本 v1.11.1 系统版本:Centos 7.4 3.10.0-693.el7.x86_64 master: 192.168.0.205 node1: 192.168.0.2 ...

  4. JQuery瀑布流特效（练习）

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  5. kvm 安装操作系统问题

    1.出现error processing drive: 解决: --ram 设置到1024 2.分区的时候磁盘文件大小为0 解决:创建虚拟机的时候添加参数ormat=qcow2,size=7,bus= ...

  6. ArcGIS JavaScript API动态图层

      矢量动态图层     <!DOCTYPE HTML> <html>   <head> <meta http-equiv="Content-Typ ...

  7. 微信小程序-06-详解介绍.js 逻辑层文件-注册页面

    上一篇介绍的是 app.js 逻辑层文件中注册程序,对应的每个分页面都会有的 js 文件中 page() 函数注册页面 微信小程序-06-详解介绍.js 逻辑层文件-注册页面 宝典官方文档: http ...

  8. (网页)JS中的小技巧，但十分的实用！

    转自CSDN: 1.document.write(”"); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4. ...

  9. 记一次nginx php配置的心路历程

    1.本来搞好了php的配置,想把目录下移一层 从 www.abc.com 变成 www.abc.com/wxapi ,由于我的真实文件目录比路由少了一层public 尝试了很多办法都不行 甚至想到了u ...

  10. CSS中各种长度单位总结

    在前端开发工作过程中曾碰到这样一问题: <style type="text/css"> .parent{ width:400px; height:300px; bord ...