木灵鱼儿
阅读:407
实现一个基于策略模式的表单校验
最近项目居然要求不能使用vue cli这种工程化极度成熟的开发方案,非常痛苦的继承了上一代的gulp打包。
苦哈哈!
这也就导致不能使用ts,babel的兼容处理更是极少极少的,写啥都是得想一下,特别是没有箭头函数,this的指向我都bind了不知道多少次了。
这次的功能里有一个表单校验的需求,所以我想着封装一个小工具来提高书写代码的流畅度,加上之前就一直想写一个基于策略模式的实际实现,这次赶巧给碰上了。
东西比较多就不直接贴代码了,我上传到github仓库了,有兴趣去看看。
github:CustomValidator
效果演示
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
行为模式:策略模式
简介策略模式: 该模式定义了一系列算法,并将每个算法封装起来,使它们可以相互替换,且算法的变化不会影响使用算法的客户。策略模式属于对象行为模式,它通过对算法进行封装,把使用算法的责任和算法的实现分割开来,并委派给不同的对象对这些算法进行管理。简单点来说就是,我现在有10个算法,可能会根据不同的状态使用不同的算法,一般的做法就是if else或者switch这种判断方式,这样的话就跟状态模式一样,后续新增的算法和状态判断又得套一层if判断,这样的话代码的可读性就下降,且维护起来比较麻烦。我们来看个代码例子:function calc(type: number, a: number, b: ...
关于element el-input 输入的值需要转number的问题
前言经常是一个input表单需要输入数字和小数,那么如果仅仅是要求数据格式,我们可以通过表单校验的方式对输入的值进行限制,具体的做法,我之前就写过文章:《element input表单验证数字类型方法大全》里面有关于数字类型校验的方式,基本涵盖了日常需求。但是,仅仅就只能这样吗???no,如果后端要求你输入的数字,提交给他的时候也必须是数字类型呢?要知道,即便我们做了表单校验,校验它输入的必须是数字格式,但是input本身就是一个string类型的值,即便你设置type="number"也无法改变它值的类型。有人说用.number;其实这个问题之前就聊过了,这个修饰符...
element input表单验证数字类型方法大全
是不是常常头疼数字类型的校验,整数,小数,往往无法通过一个rules的type属性搞定,自定义校验又五花八门,是否有一套标准流程呢?整数校验整数校验简单,input使用.number修饰符,rules配置type属性即可。<template> <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px"> <el-form-item label="短信条数:" pr...
关于Element 表单验证数字类型不能为空字符的问题
今天写代码遇到一个问题,就是有一个输入框,他必须为整数,但是又不是必填的,默认的值是一个空字符,导致每次提交是都提示校验不通过。<template> <el-input v-model.number="sort" placeholder="请输入分类排序"></el-input> </template> <script> export default { data(){ return { sort:"", } ...