策略模式

简单点说就是:实现目标的方式有很多种,你可以根据自己身情况选一个方法来实现目标.

所以至少有2个对象 .  一个是策略类,一个是环境类(上下文). 然后自己就可以根据上下文选择不同的策略来执行方案.

策略模式的优点:
　　1. 策略模式利用组合、委托和多态等技术和思想，可以有效地避免多重条件选择语句
　　2. 策略模式提供了对开放-封闭原则的完美支持，将算法封装在独立的 策略类 中，使得它们易于切换，易于理解，易于扩展.

// html

<!DOCTYPE html>

<head>

    <meta charset="utf8">

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

    <link rel="stylesheet" type="text/css" href="style.css">

    <script src="rule.js"></script>

    <script src="validator.js"></script>

</head>

<body>

    <form action="#" method="GET" id="form">

        <div class="field">

            <label>用户名</label>

            <input type="text" name="name">

        </div>

        <div class="field">

            <label>联系电话</label>

            <input type="text" name="mobile">

        </div>

        <div class="field">

            <label>邮箱</label>

            <input type="text" name="email">

        </div>

        <button class="submit" type="submit">提交</button>

    </form>

    <script>

        let dom = document.getElementById("form");

        let formValid = new FormValid(dom);

        formValid.add({

            field: "name",

            rule: new RequiredRule(),

            errormsg: "字段必填"

        })

        formValid.add({

            field: "name",

            rule: new LengthRule(10),

            errormsg: "限定长度为10个字符"

        })

        formValid.add({

            field: "mobile",

            rule: new MobileRule(),

            errormsg: "手机号码错误"

        })

        formValid.add({

            field: "email",

            rule: new EmailRule(),

            errormsg: "邮箱格式错误"

        })

        dom.onsubmit = function (event) {

            let result = formValid.isValid();

            if (result !== true) {

                alert(result);

                return false;

            }

            alert("提交成功");

        }

    </script>

</body>

</html>

// css

#form{

    margin: 50px auto;

    width: 500px;

}

input {

    width: 350px;

    height: 24px;

    padding: 0 4px;

    float: left;

}

.field{

    margin-top: 10px;

    overflow: hidden;

}

label {

    float: left;

    text-align: right;

    width: 100px;

    overflow: hidden;

    padding-right: 5px;

}

.submit{

    margin-top: 20px;

    margin-left:104px;

}

// 策略类

/**

 * 必填

 */

class RequiredRule {

    /**

     * 验证

     * @param {string} value 值

     * @param {string} errormsg 错误信息

     * @param {any} attach 附加参数

     * @returns {string|bool}

     */

    test(value, errormsg, attach) {

        return /^(:?\s*)$/.test(value) ? errormsg : true;

    }

}

/**

 * 范围

 */

class RangeRule {

    /**

     * 构造函数

     * @param {array} range

     */

    constructor(range) {

        this.range = range;

    }

    /**

     * 验证

     * @param {string} value 值

     * @param {string} errormsg 错误信息

     * @returns {string|bool}

     */

    test(value, errormsg) {

        value = Number.parseFloat(value);

        if (this.range[0] <= value && this.range[1] > value) {

            return true;

        }

        return errormsg;

    }

}

/**

 * 有效数值验证

 */

class NumberRule {

    /**

     * 验证

     * @param {string} value 值

     * @param {string} errormsg 错误信息

     * @returns {string|bool}

     */

    test(value, errormsg) {

        return /^(?:\d+)$/.test(value) || errormsg;

    }

}

/**

 * 邮箱验证

 * 格式:登录名@主机名.域名

 */

class EmailRule {

    constructor() {

        this.rule = new RegExp(/(?:\w+)@(?:\w+)\.(?:\w+)/);

    }

    /**

     * 验证

     * @param {string} value 值

     * @param {string} errormsg 错误信息

     * @returns {string|bool}

     */

    test(value, errormsg) {

        return this.rule.test(value) || errormsg;

    }

}

/**

 * 手机号验证

 */

class MobileRule {

    constructor() {

        this.rule = new RegExp(/^1\d{10}$/);

    }

    /**

     * 验证

     * @param {string} value 值

     * @param {string} errormsg 错误信息

     * @returns {string|bool}

     */

    test(value, errormsg) {

        return this.rule.test(value) || errormsg;

    }

}

class LengthRule {

    constructor(maxlength) {

        this.maxlength = maxlength;

    }

    /**

     * 验证

     * @param {string} value 值

     * @param {string} errormsg 错误信息

     * @returns {string|bool}

     */

    test(value, errormsg) {

        return value.length > this.maxlength ? errormsg : true;

    }

}

// 环境类

class FormValid {

    /**

     * 构造函数

     * @param {HTMLFormElement} form 元素节点

     */

    constructor(form) {

        this.form = form;

        this.rules = [];

    }

    /**

     * 添加验证规则

     * @param {object} option

     * @param {string} option.field  字段名

     * @param {object} option.rule  规则

     * @param {string} option.errormsg  错误信息

     */

    add({ field, rule, errormsg }) {

        if (typeof rule.test == "function" && this.form[field]) {

            this.rules.push(() => {

                return rule.test(this.form[field].value, errormsg);

            });

        }

    }

    isValid() {

        let result = [];

        for (let i = 0; i < this.rules.length; i++) {

            let r = this.rules[i]();

            if (r !== true) result.push(r);

        }

        return result.length > 0 ? result : true;

    }

}

源码：https://pan.baidu.com/s/17_oBg1dqmbxAdG_AW3sWgg

样本：http://js.zhuamimi.cn/%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81/

js 策略模式 实现表单验证的更多相关文章

  1. 使用JavaScript策略模式校验表单

    表单校验 Web项目中,登录,注册等等功能都需要表单提交,当把用户的数据提交给后台之前,前端一般要做一些力所能及的校验,比如是否填写,填写的长度,密码是否符合规范等等,前端校验可以避免提交不合规范的表 ...

  2. jquery.validate.js使用之自定义表单验证规则

    jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...

  3. JS组件系列——Form表单验证神器： BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  4. 关于JS中的常用表单验证+正则表达式

    一.非空验证 trim:去空格(去掉前后的空格),任何字符串都可以用这个方法.写法为:if(v.trim().length==0),表示如果去掉空格后的字符串的长度为0. <body> & ...

  5. JavaScript设计模式 - 策略模式(表单验证)

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

  6. 微信小程序之表单验证

    表单验证 何为表单验证呢? 百度百科给出的回答是这样的: 表单验证是javascript中的高级选项之一.JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 [ ...

  7. jQuery表单验证组件BootstrapValidator

    github:https://github.com/nghuuphuoc/bootstrapvalidator 参考博客:JS组件系列——Form表单验证神器: BootstrapValidator ...

  8. summernote富文本编辑器配合validate表单验证无法进行表单提交的问题

    1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...

  9. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

随机推荐

  1. C++ Opencv createTrackbar()创建滑动条实现对比度、亮度调节及注意事项

    一.对比度.亮度概念普及 1.1对比度 对比度指的是一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量,差异范围越大代表对比越大,差异范围越小代表对比越小.对比度对视觉效果的影响非常关键,一般 ...

  2. 如何获取java运行时动态生成的class文件？

    查看运行时生成的文件,以更清楚运行情况. 查看动态生成的类,一般有两个方法: 1. 使用据说是jdk自带包sa-jdi.jar里的工具. 其中,不想自己搞,当然就利用下,sa-jdi.jar 里自带的 ...

  3. lua入门demo（HelloWorld+redis读取）

    1. lua入门demo 1.1. 入门之Hello World!! 由于我习惯用docker安装各种软件,这次的lua脚本也是运行在docker容器上 openresty是nginx+lua的各种模 ...

  4. pycharm注册码（不断更新）

    2019.3.13测试可用 MTW881U3Z5-eyJsaWNlbnNlSWQiOiJNVFc4ODFVM1o1IiwibGljZW5zZWVOYW1lIjoiTnNzIEltIiwiYXNzaWd ...

  5. 如何实现一个基于 jupyter 的 microservices

    零.背景: 现有基于 Node.js 的项目,但需要整合 Data Science 同事的基于 python(jupyter) 的代码部分,以实现额外的数据分析功能.于是设想实现一个 microser ...

  6. docker 简单介绍及基础命令运用

    一.什么是docker? Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. 简单的来讲Docker实际上就是一个大型容器.容器是完全使用沙箱机制,相互之间不 ...

  7. java基础-2

    java基础-2 面向对象 定义 面向对象是一种思维方式,相对于面向过程​面向过程注重流程中的每一步,清楚流程中的每一个细节​面向对象注重的是对象,有了对象就有对象的一届​自己动手做--面向过程,找其 ...

  8. HTTP/2协议–特性扫盲篇

    HTTP/2协议–特性扫盲篇 随着web技术的飞速发展,1999年制定的HTTP 1.1已经无法满足大家对性能的要求,Google推出协议SPDY,旨在解决HTTP 1.1中广为人知的性能问题.SPD ...

  9. Struts1入门实例（简单登录）

    Struts1入门实例(简单登录) 现在开始加入公司的核心项目,但由于项目开发比较早,所以使用的技术不是很新潮,前台用的还是struts1. 虽然不是什么新技术,但仍可以从中学到好多东西的.花了一个晚 ...

  10. springboot 与 shiro 整合 （简洁版）

    前言: 网上有很多springboot 与 shiro 整合的资料,有些确实写得很好, 对学习shiro和springboot 都有很大的帮助. 有些朋友比较省事, 直接转发或者复制粘贴.但是没有经过 ...