input、el-input输入框输入规则

一、input

只能输入框只能输入正整数,输入同时禁止了以0开始的数字输入,防止被转化为其他进制的数值。
复制代码
<!-- 不能输入零时-->
<input type='text' οninput="value=value.replace(/^(0+)|[^\d]+/g,'')">
 
<!-- 能输入零时-->
<input type='text' οninput="value=value.replace(/^0+(\d)|[^\d]+/g,'')">
附:只能输入中文:
复制代码
<input type="text" οninput="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">  
附:只能输入英文:
复制代码
<input type="text" οninput="this.value=this.value.replace(/[^a-zA-Z]/g,'')">  

二、el-input

复制代码
<el-input size="small"
    οnkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
    v-model="count"
    maxlength="9"></el-input>
data() {
   return {
	  count: 0
   }
}

el-input输入金额,保留两位小数

需求:"只允许输入金额保留两位小数",有2种实现方法
方法一(通过正则控制):
复制代码
<el-input
  v-model="inputTable.amount"
  @input="formatNum(form.amount, 'amount')"
></el-input>

formatNum(val, key) {
  let temp = val.toString();
  temp = temp.replace(/。/g, ".");
  temp = temp.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
  temp = temp.replace(/^\./g, ""); //验证第一个字符是数字
  temp = temp.replace(/\.{2,}/g, ""); //只保留第一个, 清除多余的
  temp = temp.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
  temp = temp.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
  this.form[key] = temp;
},

方法二(使用组件):

这个是我最近才发现的,方便多了TT

设置精度precision,即可四舍五入;

再改改样式,隐藏按钮,靠左对齐,最后效果和普通的input无异

复制代码
 <el-input-number v-model="num" :precision="2"></el-input-number>
相关推荐
科兴第一吴彦祖几秒前
基于Spring Boot + Vue 3的乡村振兴综合服务平台
java·vue.js·人工智能·spring boot·推荐算法
朕的剑还未配妥14 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端
墨鱼鱼18 分钟前
【征文计划】Rokid JSAR 实践指南:打造沉浸式 "声动空间盒" 交互体验
前端
渣哥19 分钟前
多环境配置利器:@Profile 在 Spring 项目中的实战价值
javascript·后端·面试
携欢22 分钟前
Portswigger靶场之Exploiting a mass assignment vulnerability通关秘籍
前端·安全
什么芋泥香蕉33030 分钟前
比 Manus 还好用?这款国产 AI,让 Python 小白也能玩转编程
前端·后端
为java加瓦30 分钟前
前端学AI:如何写好提示词(prompt)
前端·人工智能·prompt
U.2 SSD36 分钟前
Echart仪表盘示例
javascript·echarts
qq_18417767738 分钟前
前端自动部署项目到服务器
服务器·前端·javascript
非凡ghost40 分钟前
猫眼浏览器(Chrome内核增强版浏览器)官方便携版
前端·网络·chrome·windows·软件需求