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 相关文章推荐
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
vue-ajax小封装实例
Sep 18 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
js数组去重的方法总结
Jan 18 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 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 一个比较完善的简单文件上传
2010/03/25 PHP
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
python统计cpu利用率的方法
2015/06/02 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
高校毕业生登记表自我鉴定
2013/11/03 职场文书
运动会广播稿60字
2014/01/15 职场文书
毕业生找工作求职信
2014/08/05 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
解决xampp安装后Apache无法启动
2022/03/21 Servers