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

rubyshen 发布于2019-08-26 12:01 / 2000人阅读

摘要：最近在做一个金额查询，验证的时候总是出现很多问题，如输入号后，框里是没有了，但是在里还是绑定了，提交的时候就会报错，真的是让人很是郁闷，小数点也是框过滤掉了，但是提交的时候也会出现。

最近在做一个金额查询，验证的时候总是出现很多问题，如输入-号后，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里就好了，不过这个方法只能用在ivew中，平时我们经常会遇到该类型得问题。
我在后来用element-ui时输入框得验证中，这个方法是不能用的
该文章去年发布，一直更新不上不去，可能文章文字太少得缘故吧

GPU云服务器云服务器 js只能输入小数 js只能输入数据 Js只能输入整数 asp只能输入数字

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108052.html

input框只允许输入正整数、正数(包含小数)的解决方法 vue.js实现

摘要：我来打自己脸了刚刚发现在中文输入法下是无效的有人能解决这个问题么如果要求只能输入数字怎么做设置那我如果想限制长度，此时会失效，限制长度太麻烦了并且还存在的一个问题是，当输入的是小数时，鼠标悬停在上会提示请输入有效值，两个最接近的值为和，这对我来打自己脸了!!!!...刚刚发现在中文输入法下是无效的,有人能解决这个问题么如果要求input只能输入数字怎么做？设置type=numbe...

el09xccxy 2019-08-23 11:51 评论0 收藏0
Vue中结合ElementUI实现：限制输入框只能输入正整数

摘要：中结合实现限制输入框只能输入正整数如果觉得对您有所帮助，麻烦您动动您的小手指给点个赞呗中禁止输入小数和负数只允许输入正整数做法一利用禁止按键的方法，主要是依靠禁止按下减号以及小数点来完成的首先要监听键盘按下事件，因为上面的组件监听事件是没有 Vue中结合ElementUI实现：限制输入框只能输入正整数如果觉得对您有所帮助，麻烦您动动您的小手指给点个赞呗(*^▽^*) input中禁止...

iamyoung001 2019-08-23 12:24 评论0 收藏0
基于PHP/CURL/codeIgniter的Spider Webbot爬虫[7]常用正则表达式

摘要：验证是否含有等字符只能输入汉字验证地址验证验证电话号码正确格式为，，，，，。验证身份证号位或位数字验证一年的个月正确格式为和验证一个月的天正确格式为和。一、校验数字的表达式 1 数字：^[0-9]*$ 2 n位的数字：^d{n}$ 3 至少n位的数字：^d{n,}$ 4 m-n位的数字：^d{m,n}$ 5 零和非零开头的数字：^(0|1-9*)$ 6 非零开头的最多带两位小数的数字...

wow_worktile 2019-07-01 14:10 评论0 收藏0
element el-input directive数字

摘要：使用自定义指令格式化背景使用开发的过程中遇到循环的数据只能输入数字，并且有不要小数点，有需要小数点的使用进行控制开发页面使用方式为保留几位小数因为用的是的，组件外层包着一层所以要使用获取对其监听失使用自定义指令格式化el-input 背景使用element开发的过程中遇到循环的数据只能输入数字，并且有不要小数点，有需要小数点的使用vue directive 进行控制showImg(...

nifhlheimr 2019-08-23 12:17 评论0 收藏0
数字在JavaScript中是如何编译的

摘要：数字数字都是浮点数，按照标准进行存储。因此，只有偶数可以在范围内表示。但只有超过指数的上限才称为中的溢出。结论在这篇博文中，我们研究了如何将其浮点数转换为位。 JavaScript中的所有数字都是浮点数。这篇博客文章解释了这些浮点数如何在64位二进制内部表示。由于特别考虑，本文中的数字将用整数表示，以便在阅读本文后，您将了解在以下交互中会发生什么：（译者注：浮点数并不一定等于小数，定...

Moxmi 2019-08-22 17:15 评论0 收藏0