vue input标签通用指令校验的实现


Posted in Javascript onNovember 05, 2019

移动端通常对于input标签要求输入有一些校验,vue的指令可达到完美校验的作用

预期效果

<input v-model="times" :data-last_value="lastTimes" v-int v-max="8" v-min="2" />

属性data-last_value的值用来缓存用户输入框上一次失去焦点后输入的值,lastTimes是初始化的变量,后续不会再随意更改此值, v-model一定不要和data-last_value绑定同一个变量, 因为这样就起不到记住用户上一次输入值,并利用该值在校验不通过的情况下使用它

指令实现

以下3个指令可完全独立使用

校验整数

const util = {
  isNumber(str) {
    const num = Number(str);
    return Math.floor(num) === num;
  }
 };
 directives: {
  int: {
   inserted: (el) => {
    let oldListener = el.onblur;
    el.onblur = (e) => {
     if (oldListener) {
      oldListener(e);
     }
     const blurValue = Number(el.value);
     // 用data-last_value属性值缓存上一次的值,以便恢复
     const lastValue = el.getAttribute('data-last_value');
     if (!util.isNumber(blurValue)) {
      util.toast('请输入数字');
      el.value = lastValue;
      el.dispatchEvent(new Event('input'));
     }
     if (el.value === lastValue) return;
     // 更新上一次的值
     el.setAttribute('data-last_value', el.value);
    }
   },
  },
 }

校验最小值

directives: {
  min: {
   inserted: (el, binding) => {
    const oldListener = el.onblur;
    el.onblur = (e) => {
     if (oldListener) {
      oldListener(e);
     }
     const blurValue = Number(el.value);
     const min = binding.value;
     if (blurValue < min) {
      // util.toast替换成自己业务的toast提示弹窗
      util.toast(`最小值不能小于${min}`);
      el.value = min;
      el.dispatchEvent(new Event('input'));
     }
     const lastValue = el.getAttribute('data-last_value');
     if (el.value === lastValue) return;
     // 更新上一次的值
     el.setAttribute('data-last_value', el.value);
    }
   },
  },
 }

校验最大值

directives: {
  max: {
   // 指令的定义
   inserted: (el, binding) => {
    const oldListener = el.onblur;
    el.onblur = (e) => {
     if (oldListener) {
      oldListener(e);
     }
     const blurValue = Number(el.value);
     const max = binding.value;
     if (blurValue > max) {
      util.toast(`最大值不能大于${max}`);
      el.value = max;
      el.dispatchEvent(new Event('input'));
     }
     const lastValue = el.getAttribute('data-last_value');
     if (el.value === lastValue) return;
     // 更新上一次的值
     el.setAttribute('data-last_value', el.value);
    }
   },
  },
 }

小小的校验指令没想到里面还有那么多细节~~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
JS上传前预览图片实例
Mar 25 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
vue子传父关于.sync与$emit的实现
Nov 05 #Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 #Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 #Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 #Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 #Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 #Javascript
vue 实现路由跳转时更改页面title
Nov 05 #Javascript
You might like
PHP产生随机字符串函数
2006/12/06 PHP
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
mayfish 数据入库验证代码
2010/04/30 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
PHP常用技巧汇总
2016/03/04 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
javascript 定义初始化数组函数
2009/09/07 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
python实现黑客字幕雨效果
2018/06/21 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Python项目跨域问题解决方案
2020/06/22 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
大学自我评价
2014/02/12 职场文书
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电