策略模式

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

所以至少有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. centos7使用wordpress布署网站（1）

    环境说明: 在同一台主机上实现LAMP(Linux + Apache + MariaDB + PHP)腾迅云主机CentOS 7.4.Apache .MariaDB .PHP 1.安装apache.m ...

  2. 微信小程序中的app.js-清除缓存

    微信小程序中的app.js 关于小程序app.js生命周期的介绍 App(Object) App() 函数用来注册一个小程序.接受一个 Object 参数,其指定小程序的生命周期回调等. App() ...

  3. 微信小程序的wx-charts插件-tab选项卡

    微信小程序的wx-charts插件-tab选项卡 效果: //index.js var wxCharts = require('../../utils/wxcharts-min.js'); const ...

  4. python图像处理库PIL的基本概念介绍

    PIL中所涉及的基本概念有如下几个:通道(bands).模式(mode).尺寸(size).坐标系统(coordinate system).调色板(palette).信息(info)和滤波器(filt ...

  5. Python代码规范之---代码不规范，亲人两行泪

    任何语言的程序员,编写出符合规范的代码,是开始程序生涯的第一步! 关于代码规范 Python 官方提供有一系列 PEP(Python Enhancement Proposals) 文档 其中第 8 篇 ...

  6. vue中复选框全选与反选

    html主要部分: <template v-for="(item, index) in checkboxList"> <input type="chec ...

  7. Maven 概要介绍

    Maven 简介 Apache Maven 是一套软件工程管理和整合工具.基于工程对象模型(POM)的概念,通过一个中央信息管理模块,Maven 能够管理项目的构建.报告和文档. Maven 工程结构 ...

  8. 使用FormData格式在前后端传递数据

    为什么一定要使用formdata格式……很大原因是因为当时我犯蠢…… 前端肯定是JS了,具体不写了,使用Postman测试,后端语言是Java,框架Spring Boot,使用IntelliJ IDE ...

  9. mysql 开发基础系列4 字符数据类型

    字符串类型 1.1 CHAR 和VARCHAR 类型 CHAR 列的长度固定为创建表时声明的长度,VARCHAR 列中的值为可变长字符串.在检索的时候,CHAR 列删除了尾部的空格,而VARCHAR ...

  10. 在Mac OSX上配置Appium+Android自动化测试环境

    前提准备 开始正文之前,你需要准备好一些基本条件: 1.安装好Mac OSX 操作系统的设备 2.能够访问中国局域网以外资源的方法(没有也行,但很痛苦) 3.已经安装好 homebrew 4.已经安装 ...