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和CSS速查手册
Aug 20 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
js继承的实现代码
Aug 05 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 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
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
asp批量修改记录的代码
2008/06/25 Javascript
js charAt的使用示例
2014/02/18 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
python书籍信息爬虫实例
2018/03/19 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
Python远程方法调用实现过程解析
2020/07/28 Python
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
小学安全教育材料
2014/02/17 职场文书
师德模范事迹材料
2014/06/03 职场文书
个人授权委托书格式
2014/08/30 职场文书
房产协议书范本
2014/10/18 职场文书
交流会主持词
2015/07/02 职场文书
美容院管理规章制度
2015/08/05 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python