vue如何设置输入框只能输入数字且只能输入小数点后两位,并且不能输入减号
更新时间：2024年05月24日 10:19:21 作者：沐卿゚
这篇文章主要介绍了vue如何设置输入框只能输入数字且只能输入小数点后两位,并且不能输入减号问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue设置输入框只能输入数字且只能输入小数点后两位,并且不能输入减号
<el-input v-model.trim="sb.price" placeholder="现价" class="input_w3" oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"/>
限制只能输入1到100，且只能输入小数点后二位
<el-input v-model="params.tongZhengPercentage" type="number" placeholder="店铺抽成占比" oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); if(value>100)value=100;if(value<0)value=null;if(value<0)value=null;if((value[0] == 0 && value[1] > 0) || value == '00')value=value.slice(1);"/>
只能输入1到100
<el-input
v-model="num" type="number" placeholder="请输入"
oninput="if(!/^[0-9]+$/.test(value))
value=value.replace(/\D/g,'');
if(value>100)
value=100;
if(value<0)
value=null"
/>嘎嘎简单、、、、、、、、、
vue只能输入数字和俩位小数的自定义指令
/**
* 限制输入框只能输入n为小数
*/
export const inputLimt = {
bind(el, binding) {
var wins_0 = /[^\d]/g //整数判断
var wins_1 = /[^\d^\.]/g //小数判断
var flag = true;
var points = 0;
var lengths = 0
var remainder = 0
var no_int = 0
const target = el instanceof HTMLInputElement ? el : el.querySelector("input");
target.addEventListener("compositionstart", e => {
flag = false;
});
target.addEventListener("compositionend", e => {
flag = true;
});
target.addEventListener("input", e => {
setTimeout(function () {
if (flag) {
if (binding.value == 0) {
if (wins_0.test(e.target.value)) {
e.target.value = e.target.value.replace(wins_0, "");
e.target.dispatchEvent(new Event("input")) //手动更新v-model值
}
}
if (binding.value == 1) {
if (wins_0.test(e.target.value.toString().replace(/\d+\.(\d*)/, '$1'))) {
remainder = true
}
if ((e.target.value.split('.')).length - 1 > 1) {
points = true
}
if (e.target.value.toString().split(".")[1] != undefined) {
if (e.target.value.toString().split(".")[1].length > 1) {
lengths = true
}
}
if (e.target.value.toString().indexOf(".") != -1) {
no_int = false
} else {
no_int = true
}
if (wins_1.test(e.target.value) || lengths || points || remainder) {
if (!no_int) {
e.target.value = e.target.value.replace(wins_1, "").replace('.', '$#$').replace(/\./g, '').replace(
'$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').substring(0, e.target.value.indexOf(
".") + 2)
} else {
e.target.value = e.target.value.replace(wins_0, "")
}
e.target.dispatchEvent(new Event("input"))
}
}
if (binding.value == 2) {
if (wins_0.test(e.target.value.toString().replace(/\d+\.(\d*)/, '$1'))) {
remainder = true
}
if ((e.target.value.split('.')).length - 1 > 1) {
points = true
}
if (e.target.value.toString().split(".")[1] != undefined) {
if (e.target.value.toString().split(".")[1].length > 2) {
lengths = true
}
}
if (e.target.value.toString().indexOf(".") != -1) {
no_int = false
} else {
no_int = true
}
if (wins_1.test(e.target.value) || lengths || points || remainder) {
if (!no_int) {
e.target.value = e.target.value.replace(wins_1, "").replace('.', '$#$').replace(/\./g, '').replace(
'$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').substring(0, e.target.value.indexOf(
".") + 3)
} else {
e.target.value = e.target.value.replace(wins_0, "")
}
e.target.dispatchEvent(new Event("input"))
}
}
}
}, 0)
})
}
}
main.js
Vue.directive('inputLimit',inputLimt)使用
<el-input v-input-limit="2"
v-model="popAddOrEditDialog.form.ratio" placeholder="请输入服务比例">
</el-input>vue输入框只能输入数字类型，禁止输入和粘贴e
js怎么去除1e里面e
方法一：使用 Number() 函数将科学计数法表示的字符串转换为数字。然后，使用 toString() 方法将其转换回字符串形式，这样就会自动移除科学计数法中的 "e"
var num = 1e10; // 科学计数法表示的数字 var numStr = Number(num).toString(); // 转换为字符串，自动移除 "e" console.log(numStr); // 输出 "10000000000"
方法二：使用正则表达式替换方法移除科学计数法中的 "e"。
var num = 1e10; // 科学计数法表示的数字
var numStr = num.toString().replace("e", ""); // 使用 replace 方法替换 "e" 为空字符串 console.log(numStr); // 输出 "10000000000"vue中限制长度以及数字（包括e）
// 封装方法--只允许输入正数包
export function getNum(val) {
// 先把非数字的都替换掉，除了数字
val = Number(val).toString().replace(/[^\d]/g, '')
return val
}
<el-input
type="number"
v-model.trim="ruleForm.height"
clearable
placeholder="请输入数字"
οnkeydοwn="return event.keyCode !== 69"
@input="changeNumber('height',ruleForm.height,8)"
/>
changeNumber(name, obj, len = 8) {
const t = obj.length > len ? obj.slice(0, len) : obj
this.$set(this.ruleForm, name, getNum(t))
}vue中自动保存两位小数
// 封装方法--只允许输入数字包含小数点
export function getFloorNumber(val, saveNumber = 2) {
// 先把非数字的都替换掉，除了数字
val = val.replace(/[^\d.]/g, '')
val = val.replace(/\.{2,}/g, '.')
val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
const index = val.indexOf('.')
if (index != -1) {
const arr = val.split('.')
if (arr[1].length > saveNumber) {
arr[1] = arr[1].substr(0, saveNumber)
}
val = arr.join('.')
}
return val
}
<el-input
v-model="ruleForm.sharedArea"
placeholder="请填写面积"
clearable
@input="changeSpliceArea('area')"
@blur="changeArea('area')"
/>
changeSpliceArea(name, len = 8) {
this.ruleForm[name] = getFloorNumber(this.ruleForm[name])
if (this.ruleForm[name].length >= len) {
this.ruleForm[name] = this.ruleForm[name].substr(0, len)
}
},
changeArea(name) {
const t = this.ruleForm[name] && this.ruleForm[name].charAt(this.ruleForm[name].length - 1)
if (t == '.') {
this.ruleForm[name] += '00'
}
}常用工具方法
// 只允许输入数字包含负数
export function getNumber(val) {
const t = val.charAt(0)
// 先把非数字的都替换掉，除了数字
val = val.replace(/[^\d]/g, '')
// 如果第一位是负号，则允许添加
if (t === '-') {
val = '-' + val
}
return val
}
// 只允许输入正数包
export function getNum(val) {
// 先把非数字的都替换掉，除了数字
val = Number(val).toString().replace(/[^\d]/g, '')
return val
}
// 只允许输入数字包含小数点
export function getFloorNumber(val, saveNumber = 2) {
// 先把非数字的都替换掉，除了数字
val = val.replace(/[^\d.]/g, '')
val = val.replace(/\.{2,}/g, '.')
val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
const index = val.indexOf('.')
if (index != -1) {
const arr = val.split('.')
if (arr[1].length > saveNumber) {
arr[1] = arr[1].substr(0, saveNumber)
}
val = arr.join('.')
}
return val
}
// 只允许输入数字包含小数，不限制长度
export function getFloorNumNoLength(val) {
const t = val.charAt(0)
if (t === '.') {
return val.replace('.', '')
}
val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
// 先把非数字的都替换掉，除了数字
val = val.replace(/[^\d.]/g, '')
return val
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了elementUI中使用formdata进行上传文件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
这篇文章主要介绍了vue3选项式api如何监控数组变化问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Vue和React中快速使用Electron的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue快速实现通用表单验证的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要介绍了基于Vue实现关键词实时搜索高亮显示关键词，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
在网上找了好久关于左右过渡动画折叠的组件,没有合适的代码,效果类似于element UI中的Drawer抽屉组件,只不过ele中的都是悬浮的组件,工作中遇到的很多都是占用空间的展开折叠,网上很多也是上下展开收起的组件,于是就自己写了一个,分享给大家,感兴趣的朋友参考下吧2023-11-11
这篇文章主要介绍了elementUI同一页面展示多个Dialog的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要为大家介绍了vue组件生命周期钩子使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪2022-04-04
本篇文章主要介绍了Vue源码学习之初始化模块init.js解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要为大家详细介绍了vue实现横屏滚动公告效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论