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

最近在做一个金额查询，验证的时候总是出现很多问题，如输入-号后，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里就好了

言初情感网还为您提供以下相关内容希望对您有帮助：

如果按下的键是负号（-）或小数点（.）等不希望出现的字符，则阻止该事件的默认行为，从而避免这些字符被输入到input中。这种方法直接且有效，但需要在每个需要输入的input上都添加相应的事件。封装自定义指令：创建一个自定义指令（如v-Int），该指令负责处理input的键盘事件。在指令的绑定值中，可以定

首先，如果需要输入为数字、英文，可以使用正则表达式来实现。可以通过在input元素上添加事件，利用`@input`方法来验证输入内容。其次，如果需要输入为正整数，可以将输入值转换为数字并进行判断。如果输入的值为负数或非整数，可以使用`v-model`指令将输入值更新为一个合法的正整数。对于...

假如你的textbox的name为text1那么加入以下代码即可实现你要的功能。Private Sub Text1_KeyPress(KeyAscii As Integer)Select Case KeyAscii Case 8 Case 46 If InStr(Text1, ".") <> 0 Then KeyAscii = 0 Case 47 To 57 Case Else KeyAscii = 0 End Select End Sub ...

对于特定的输入格式要求，可以使用正则表达式进行校验。例如，对于金额或重量的输入框，可以使用正则表达式来输入的内容只能为数字和特定数量的小数位。4. 在Vue组件中集中管理校验逻辑 对于大型项目，可以在Vue组件中集中管理校验逻辑。例如，在main.ts或类似的入口文件中，为所有的input框添加一个全局的...

[\d]{6}\.?[\d]{2} 小数点前必须是6位 小数点后必须是2位的正则 (^[1-9]{1}[0-9]{0,5}\.\d{0,2}$)|(^[1-9]{1}[0-9]{0,5}$) 整数部分1-6位，小数部分只能为2位 若没有小数部分 整数最多6位

例如，如果你希望用户输入一个包含正数或负数的小数，使用^(\-|\+?)\d+(\.\d+)?$；如果用户只可以输入正数或负数，但不要求输入小数，使用^(\-?)\d+$；如果用户可以输入整数，但不要求输入正数或负数，使用^(\-?)\d+$。通过调整正则表达式的组成部分，可以灵活地满足不同需求，确保数据输入...

本文将向你展示如何利用Vue2.0与ElementUI实现输入框金额格式化功能。在实际业务场景中，金额通常需保留到小数点后两位，表示角和分，并且采用逗号作为千位分隔符，便于快速阅读。首先，我们需明白，加了分隔符的金额已转变为字符串类型。在数据库中，金额数据通常定义为数字类型，因此在存储前需进行类型转换...

import java.util.Scanner;import java.text.DecimalFormat;public class Rectangle {public static void main(String[] args) {String str;Double width, length, area;// 判断小数条件的正则表达式String regEx = "^([1-9][0-9]*)+(.[0-9]{1,1})?$"; Scanner s = new Scanner(System....

(.\d{1,2})?$：若存在小数点，则以小数点后的一至两位小数结尾 在页面中写一个输入框和点击按钮，测试校验是否成功：浏器F12打开控制台查看效果：在这里入图片描述 可以看到输入框输入1.后正常检验是false，然而如果在浏览器中输入校验规则和字符串则不然：在这里入图片描述 如果输入个带小数点的...

在Qt中，若要使QTextEdit只能输入字母和数字，并且每输入两个字符后必须输入一个空格才能继续输入数字或字母，最直接的方法是重载QTextEdit的keyPressEvent(QKeyEvent *event)函数。具体实现步骤如下：在重载的keyPressEvent函数中，首先获取当前输入的字符，然后检查该字符是否为字母或数字。如果是，则继续检查...