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 相关文章推荐
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
js实现加载更多功能实例
Oct 27 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
js实现旋转木马轮播图效果
Jan 10 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项目应该注意的几点事项分享
2013/12/20 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
PHP _construct()函数讲解
2019/02/03 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
js正确获取元素样式详解
2009/08/07 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
python调用java的jar包方法
2018/12/15 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
wxPython实现列表增删改查功能
2019/11/19 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
C#怎么让一个窗口居中显示?
2015/10/20 面试题
50道外企软件测试面试题
2014/08/18 面试题
施工资料员岗位职责
2014/01/06 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
电影地道战观后感
2015/06/04 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
总结Python变量的相关知识
2021/06/28 Python
httpclient调用远程接口的方法
2022/08/14 Java/Android