JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】


Posted in Javascript onMay 01, 2020

本文实例讲述了JS表单验证插件之数据与逻辑分离操作。分享给大家供大家参考,具体如下:

之前已经写过一个表单验证插件了,为什么还会重复造轮子呢?第一个问题是代码结构比较乱,虽然通过原型继承的写法将处理分层,但业务逻辑和数据结构混杂在一起,导致第二个问题——可扩展性和灵活性差。

认真分析表单验证的过程,可以分为两步:怎么验证和如何验证。怎么验证是数据层面的问题,如何验证是业务逻辑层面的问题。

点击:这里 查看源码

策略模式将对象和规则区分

如何让算法(数据层)和对象(逻辑层)分开来,使得算法可以独立于使用它的客户而变化?这里引入策略模式。

什么是策略模式

定义一系列的算法,把每一个算法封装起来, 并且使它们可相互替换。本模式使得算法可独立于使用它的客户而变化。

即:策略模式把对象本身和运算规则区分开来,其功能非常强大,因为这个设计模式本身的核心思想就是面向对象编程的多形性的思想。

关于策略模式的更多定义,参见

下面我们就开始运用策略模式来解决代码分层问题。

理想中的插件调用

在开始代码之前,我们希望用更简单的方式调用插件。

// 获取表单form元素
  var form = document.getElementById('myForm');

  // 创建表单校验实例
  var validation = new FormValidator();
  // 编写校验配置
  validation.add(form.username, 'isEmpty', '用户名不能为空s');
  validation.add(form.password, 'minLength: 6', '密码长度不能小于6个字符');
  validation.add(form.password2, 'isEqualTo: password', '密码不一致');
  validation.add(form.mobile, 'isMobile', '请填写正确的手机号');

  // 开始校验,并接收错误信息
  $('#submit-btn').click(function() {
    var errorMsg = validation.start();

    // 如果有错误信息输出,说明校验未通过
    if(errorMsg){
      console.log(errorMsg);
      return false;
    }
  })

add()方法参数说明

1、 参数1:需要验证的表单项DOM元素,form[name属性]
2、 参数2:验证方法,用冒号分割,冒号后的值为方法的参数(可选)
3、 参数3:错误提示信息

编写验证函数

我们开始运用策略模式编写代码。第一步,只编写无关业务逻辑的验证函数算法,即数据层

var VerifyPolicies = {
  isEmpty: function(value, errMsg) {
    if(value == '') return errMsg;
  },

  // 最小长度
  minLength: function(value, length, errMsg) {
    if (value.length < length) return errMsg;
  },
  // 手机号码
  isMobile: function(value, errMsg) {
    if(!/^1[34578]\d{9}$/.test(value)) return errMsg;
  },
  // 是否相等
  isEqualTo: function (value, toDom, errMsg) {
    var toValue = document.getElementById(toDom).value;

    if(value !== toValue) return errMsg;
  }
};

编写验证逻辑

function FormValidator(VerifyPolicy) {
  this.verifyPolicies = VerifyPolicy ? VerifyPolicy : VerifyPolicies;
  // 待执行的验证函数数组
  this.validateFn = [];
}

FormValidator.prototype.add = function(dom, rules, errMsg) {
  var _this = this;

  this.validateFn.push(function() {
    var args = [];
    var rule = rules.split(':');
    var ruleName = rule[0];
    var ruleParam = rule[1];
    var value = dom.value;

    args.push(value);
    if(ruleParam) args.push(ruleParam.trim());
    args.push(errMsg);

    // 这里调用apply只是为了传参,如果支持ES6,也可以这样做:
    // return _this.verifyPolicies[ruleName](...args)
    return _this.verifyPolicies[ruleName].apply(null, args);
  })
};

FormValidator.prototype.start = function() {
  var fn = this.validateFn;
  for(var i =0, len = fn.length; ; i++) {
    var msg = fn[i]();
    if(msg) return msg;
  }
};

至此,整个表单验证已经初步完成,在此方法之上,可以随意添加方法了。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
js展开闭合效果演示代码
Jul 24 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
js实现图片懒加载效果
Jul 17 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
前端如何实现动画过渡效果
Feb 05 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 #Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 #jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 #jQuery
jQuery实现的上拉刷新功能组件示例
May 01 #jQuery
JS深入学习之数组对象排序操作示例
May 01 #Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 #Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 #Javascript
You might like
php 禁止页面缓存输出
2009/01/07 PHP
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
Python 的描述符 descriptor详解
2016/02/27 Python
python书籍信息爬虫实例
2018/03/19 Python
深入了解Django中间件及其方法
2019/07/26 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
wxPython多个窗口的基本结构
2019/11/19 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
农民工工资承诺书范文
2014/03/31 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
高中班长竞选稿
2015/11/20 职场文书
90条交通安全宣传标语
2019/10/12 职场文书