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

news2024/12/23 8:10:51

一、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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1313492.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C# WPF上位机开发(利用tcp/ip网络访问plc)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 c# wpf如果是用来开发非标上位机的&#xff0c;那么和plc的通信肯定是少不了的。而且&#xff0c;大部分plc都支持modbus协议&#xff0c;所以这个…

call 和 apply:改变对象行为的秘密武器(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

LabelStudio数据标注详细方法

文章目录 情感分析任务Label Studio使用指南1. label-studio 安装2. label-studio 项目创建3. 情感分析任务标注3.1 语句级情感分类任务3.2 属性级情感分析任务3.2.1 属性-情感极性-观点词抽取&#xff08;1&#xff09;Span类型标签&#xff08;2&#xff09;Relation类型标签…

STL中sort的底层实现

文章目录 1、源码分析2、算法优化3、总结 在讲解STL中sort的底层原理之前&#xff0c;先引申出这样几个问题&#xff1f; ①STL中sort的底层是采用哪种或者哪几种排序&#xff1f; ②STL中sort会导致栈溢出吗&#xff1f; ③快速排序的时间复杂度是不稳定的 l o g 2 n log_2n l…

cec2013(python):鸡群优化算法(Chicken Swarm Optimization, CSO)

一、鸡群优化算法CSO求解cec2013 1.cec2013函数简介 CEC 2013 Special Session on Real-Parameter Optimization中共有28个测试函数维度可选择为10/30/50/100。 每个测试函数的详细信息如下表所示&#xff1a; cec2013参考文献&#xff1a; [1] Liang J J , Qu B Y , Sugan…

IT 人员与加密程序:如何战胜病毒

&#x1f510; 加密程序是攻击者在成功攻击组织时使用最多的恶意软件类型。它们通常会发送到一个庞大的电子邮件地址数据库&#xff0c;看起来像 Word 或 Excel 文档或 PDF 文件。 想象一下&#xff0c;你是会计部门的一名员工。这种格式的文件在电子文档管理系统中被广泛使用…

前端js实现将异步封装成promise然后用async await转同步

&#xff08;一&#xff09;需求背景&#xff1a; 哈喽 大家好啊&#xff0c;今天遇到一个问题&#xff0c;需要将异步请求转换成同步 &#xff08;二&#xff09;相关代码&#xff1a; function getInfo() {return new Promise((resolve,reject)> {setTimeout(()> {re…

3D点云广义零样本分类的递归循环对比生成网络笔记

1 Title Contrastive Generative Network with Recursive-Loop for 3D point cloud generalized zero-shot classification(Yun Hao, Yukun Su, Guosheng Lin, Hanjing Su, Qingyao Wu)【Pattern Recognition】 2 Conclusion This work aims to facilitate research on 3D poi…

报错“找不到mfc100u.dll,程序无法继续执行”的解决方法,完美解决

在软件操作过程中&#xff0c;部分用户可能遇到"计算机缺失mfc140u.dll导致无法启动程序"的困扰。这种情况常常发生在启动某特定应用&#xff0c;特别是需要VC Redistributable支持的软件时。以下为详尽解决策略&#xff0c;让用户轻松应对这类技术难题&#xff0c;重…

【AI】如何准备mac开发vue项目的环境

为了在Mac上开发Vue项目&#xff0c;你需要准备一些工具和环境。以下是主要的步骤&#xff1a; 安装Node.js和npm&#xff1a; Vue.js是一个基于JavaScript的框架&#xff0c;因此你需要Node.js环境。访问Node.js官网下载并安装Node.js&#xff0c;这也会自动安装npm&#xff0…

若依框架springboot——修改前端图片上传样式

简述 使用过若依框架的&#xff0c;一定知道若依前端框架上传图片的样式&#xff0c;是一个正方形加号图片&#xff0c;但是如果你要使用自定义样式呢。 比如将下面这个图进行修改呢 修改后的样式 你可以直接找到element-ui 修改上传图片的组件&#xff0c;也可以加入新的组…

JS的箭头函数this:

箭头函数不会创建自己的this&#xff0c;它只会从自己的作用域链的上一层沿用this。 具体看实例&#xff1a; //以前&#xff1a;谁调用的这个函数 this就指向谁// console.log(this);//window// function fn(){// console.log(this);//window 因为这个函数也是window调用…

机器学习入门笔记

文章目录 背景具体步骤1.环境搭建2.写个demo1.数据处理2.分割数据集3.用模型训练数据&#xff0c;并得到预测结果4.绘制结果5.评估 背景 最近学习了一些关于机器学习的内容&#xff0c;做个笔记。 具体步骤 1.环境搭建 需要用到的工具&#xff1a;pycharm&#xff0c;anaco…

Python求小于m的最大10个素数

为了找到小于m的最大10个素数&#xff0c;我们首先需要确定m的值。然后&#xff0c;我们可以使用一个简单的算法来检查每一个小于m的数字是否是素数。 下面是一个Python代码示例&#xff0c;可以找到小于m的最大10个素数&#xff1a; def is_prime(n): if n < 1: …

数据分析为何要学统计学(11)——如何进行时间序列分析

时间序列是由随时间变化的值构成&#xff0c;如产品销量、气温数据等等&#xff0c;该数据集合是个有序序列&#xff0c;除了数值&#xff0c;没有其他因素。通过对时间序列展开分析&#xff0c;能够回答如下问题&#xff1a; &#xff08;1&#xff09;被研究对象的活动特征是…

VRRP协议详解

目录 一、基础概念 1、概念 2、VRRP的基本结构 状态机 二、VRRP主备备份工作过程 1、备份工作过程 2、VRRP的负载分担工作 三、实验 一、基础概念 1、概念 VRRP能够在不改变组网的情况下&#xff0c;将多台路由器虚拟成一个虚拟路由器&#xff0c;通过配置虚拟路由器的I…

常用函数之js复制图片至剪切板

背景 最近在工作中遇到了一个需求&#xff0c;点击按钮将Echart图复制到剪切板&#xff0c;然后按Ctrl&#xff08;command&#xff09;V可以直接复制到聊天软件&文档编辑器中。本以为这是一个比较简单的需求&#xff0c;好像找了一圈资料&#xff0c;发现事情并不简单&am…

Vue 组件传参 emit

emit 属性&#xff1a;用于创建自定义事件&#xff0c;接收子组件传递过来的数据。 注意&#xff1a;如果自定义事件的名称&#xff0c;和原生事件的名称一样&#xff0c;那么只会触发自定义事件。 setup 语法糖写法请见&#xff1a;《Vue3 子传父 组件传参 defineEmits》 语…

『番外篇二』Swift “黑魔法”之动态获取类实例隐藏属性的值

概览 在 Swift 代码的调试中,我们时常惊叹调试器的无所不能:对于大部分“黑盒”类实例的内容,调试器也都能探查的一清二楚。 想要自己在运行时也能轻松找到 Thread 实例“私有”属性的值吗(比如 seqNum)? 在本篇博文中您将学到如下内容: 概览1. 借我,借我,一双慧眼吧…

MFC画折线图,基于x64系统

由于项目的需要&#xff0c;需要画一个折线图。 传统的Teechart、MSChart、HighSpeedChart一般是只能配置在x86系统下&#xff0c;等到使用x64系统下运行就是会报出不知名的错误&#xff0c;这个地方让人很苦恼。 我在进行配置的过程之中&#xff0c;使用Teechart将x86配置好…