vue指令只能输入正数并且只能输入一个小数点的方法


Posted in Javascript onJune 08, 2018

最近在做一个金额查询,验证的时候总是出现很多问题,如输入-号后,input框里是没有了,但是在model里还是绑定了,提交的时候就会报错,真的是让人很是郁闷,小数点也是input框过滤掉了,但是提交的时候也会出现。不过经过努力终于找到了一种解决方案,在这里``和大家分享一下下。

Vue.directive('numbers', {
 bind: function (el, binding) {
  console.log('ere')
 },
 inserted: function (el) {
  // el.querySelector('input').blur(console.log('etset'))
 },
 update: function (el, binding, vnode, oldVnode) {
  console.log('vnode', vnode)
  let express = vnode.data.directives[1].expression
  // let value = el.querySelector('input').value
  let value = vnode.data.directives[1].value
  if (typeof value === 'string') {} //在重置的时候清空
  if (value.split('.').length - 1 > 1) {
   value = value.replace(/\.{2,}/g, '') // 只保留第一个. 清除多余的
   value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
  }
  let repeatValue = value.replace(/[^\d.]/g, '')
  // setTimeout(() => {
  //  el.querySelector('input').value = repeatValue
  // }, 5)
  setValueWithExpressionVue(vnode.context.$data, express, repeatValue)
 },
 componentUpdated: function () {},
 unbind: function (el) {}
})

// 
function setValueWithExpressionVue (currObj, expression, value) {
 expression = expression.split('.')
 expression.forEach(function (arg, i) {
  if (i < expression.length - 1) {
   currObj = currObj[arg]
  } else {
   currObj[arg] = value
  }
 })
}

放到main.js里就好了

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

Javascript 相关文章推荐
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
js实现常用排序算法
Aug 09 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
微信小程序解除10个请求并发限制
Dec 18 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 #Javascript
原生实现一个react-redux的代码示例
Jun 08 #Javascript
vue项目中使用百度地图的方法
Jun 08 #Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 #Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 #Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 #jQuery
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 #Javascript
You might like
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
PHP数组操作类实例
2015/07/11 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
jquery选择器简述
2015/08/31 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
ECMAScript6--解构
2017/03/30 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
Python WSGI的深入理解
2018/08/01 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
python实现TCP文件传输
2020/03/20 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
机电工程学生自荐信范文
2013/12/07 职场文书
社区庆八一活动方案
2014/02/02 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
积极向上的团队口号
2014/06/06 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
2015年高中语文教学总结
2015/08/18 职场文书