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 Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
JS常用函数使用指南
Nov 23 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 Javascript
对layui中的onevent 和event的使用详解
Sep 06 Javascript
关于Vue Router的10条高级技巧总结
May 06 Vue.js
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/07/12 PHP
php 中的str_replace 函数总结
2007/04/27 PHP
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
基于node实现websocket协议
2016/04/25 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
Angular开发实践之服务端渲染
2018/03/29 Javascript
js数据类型检测总结
2018/08/05 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
关键字throw与throws的用法差异
2016/11/22 面试题
协议书的格式
2014/04/23 职场文书
后备干部培训方案
2014/05/22 职场文书
事业单位鉴定材料
2014/05/25 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
干部考核工作总结2015
2015/07/24 职场文书
医院病假条范文
2015/08/17 职场文书
Python 多线程处理任务实例
2021/11/07 Python
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js