当前位置: 首页 > news >正文

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-inputv-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>

http://www.lryc.cn/news/256505.html

相关文章:

  • Qt优秀开源项目之十九:跨平台记事本Notes
  • [足式机器人]Part4 南科大高等机器人控制课 Ch03 Operator View of Rigid-Body Transformation
  • SpringBoot项目静态资源默认访问目录
  • xtu oj 1255 勾股数
  • 【ArcGIS Pro微课1000例】0051:创建数据最小几何边界范围(点、线、面数据均可)
  • Oracle 怎樣修改DB_NAME
  • git标签的管理与思考
  • ESP32网络编程-OTA方式升级固件(基于Arduino IDE)
  • 力扣-151. 反转字符串中的单词
  • VSCode Keil Assintant 联合开发STM32
  • 华为交换机基本配置
  • 每天一个Linux命令 -- (7)more命令
  • JUnit 之初体验
  • 【前端设计模式】之适配器模式
  • 【数据结构】循环队列
  • Docker的资源控制
  • SpringBoot 自动装配原理详解
  • 深度探索Linux操作系统 —— 构建initramfs
  • 使用cmake构建Qt6.6的qt quick项目,添加应用程序图标的方法
  • VUE宝典之vue-dialog使用
  • AWTK 串口屏开发(1) - Hello World
  • 鸿蒙Harmony开发初探
  • 【MySQL语言汇总[DQL,DDL,DCL,DML]以及使用python连接数据库进行其他操作】
  • 解决方案:Mac 安装 pip
  • 【恋上数据结构】前缀树 Tire 学习笔记
  • 2023五岳杯量子计算挑战赛数学建模思路+模型+代码+论文
  • Angular中的单向和双向数据绑定
  • 【Vue】vue整合element
  • HarmonyOS应用开发者高级认证考试答案
  • 6、Broker消息处理流程(六)