当前位置: 首页 > 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>

相关文章:

  • DevEco Studio 项目鸿蒙(HarmonyOS)资源引用(自定统和系统)
  • 【自定义Source、Sink】Flink自定义Source、Sink对ClickHouse进行读和批量写操作
  • 【模块化】 js 模块化(CommonJS, AMD, UMD, CMD, ES6)
  • linux系统命令
  • 基于OHTPPS实现网站HTTPS访问
  • 使用国内镜像源安装opencv
  • 计算机组成原理-选择语句和循环语句的汇编表示
  • 【数据结构】第二章——线性表(1)
  • linux(centos7)离线安装mysql-5.7.35-1.el7.x86_64.rpm-bundle.tar
  • 一文速览字节最新分布式操作系统KubeWharf
  • vue+react题集整理
  • 设计模式之结构型设计模式(二):工厂模式 抽象工厂模式 建造者模式
  • Oracle 数据库 control file的备份
  • TensortRT:sample.py:DeprecationWarning:
  • Linux shell编程学习笔记35:seq
  • 4. 路由到控制器 - Laravel从零开始教程
  • eclipse(luna)创建web工程
  • ES6核心特性
  • es6要点
  • Gradle 5.0 正式版发布
  • iBatis和MyBatis在使用ResultMap对应关系时的区别
  • IDEA常用插件整理
  • JS基础之数据类型、对象、原型、原型链、继承
  • js数组之filter
  • php ci框架整合银盛支付
  • WePY 在小程序性能调优上做出的探究
  • 基于 Babel 的 npm 包最小化设置
  • 基于Mobx的多页面小程序的全局共享状态管理实践
  • 检测对象或数组
  • 简单基于spring的redis配置(单机和集群模式)
  • 简单数学运算程序(不定期更新)
  • 警报:线上事故之CountDownLatch的威力
  • 理解IaaS, PaaS, SaaS等云模型 (Cloud Models)
  • 实习面试笔记
  • 跳前端坑前,先看看这个!!
  • 学习Vue.js的五个小例子
  • 远离DoS攻击 Windows Server 2016发布DNS政策
  • 正则学习笔记
  • mysql 慢查询分析工具:pt-query-digest 在mac 上的安装使用 ...
  • 带你开发类似Pokemon Go的AR游戏
  • ​【C语言】长篇详解,字符系列篇3-----strstr,strtok,strerror字符串函数的使用【图文详解​】
  • $(document).ready(function(){}), $().ready(function(){})和$(function(){})三者区别
  • (10)ATF MMU转换表
  • (C语言)二分查找 超详细
  • (C语言)逆序输出字符串
  • (MIT博士)林达华老师-概率模型与计算机视觉”
  • (分享)一个图片添加水印的小demo的页面,可自定义样式
  • (附源码)ssm基于jsp的在线点餐系统 毕业设计 111016
  • (介绍与使用)物联网NodeMCUESP8266(ESP-12F)连接新版onenet mqtt协议实现上传数据(温湿度)和下发指令(控制LED灯)
  • (一一四)第九章编程练习
  • (转)原始图像数据和PDF中的图像数据
  • (状压dp)uva 10817 Headmaster's Headache
  • *1 计算机基础和操作系统基础及几大协议
  • .CSS-hover 的解释
  • .net 设置默认首页