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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

AI 绘画快速开始-StableDiffusionWebui

文章目录 介绍WebUI 的安装和部署参数介绍Prompt技巧初阶Prompt&#xff1a;直接描述的精细化二阶Prompt&#xff1a;巧用标签的扩展三阶Prompt&#xff1a;负面提示词的深入应用四阶Prompt&#xff1a;文本权重调整的细化引入 LoRA&#xff1a;模型特效的创新应用 案例-生成漫…

如何排查rpc mount export: RPC: Timed out问题

文章目录 问题描述查看nfs服务是否运行正常如果以上都通过,尝试下面步骤 问题描述 我们将讨论您在 NFS 客户端上看到的 NFS 错误之一的故障排除。在尝试与 NFS 相关的命令时可以看到此错误&#xff0c;如下所示&#xff1a; 通常&#xff0c;当您看到此错误时&#xff0c;您也…

class068 更多的动态规划【算法】

class068 更多的动态规划【算法】 算法讲解068【必备】见识更多二维动态规划题目 code1 115. 不同的子序列 // 不同的子序列 // 给你两个字符串 s 和 t &#xff0c;统计并返回在 s 的 子序列 中 t 出现的个数 // 测试链接 : https://leetcode.cn/problems/distinct-subseque…

在windows11上彻底关闭系统更新

最近在windows11系统上发现网上的一些方法不太有效&#xff0c;系统还是会自己更新。像该注册表&#xff0c;计划任务等这些&#xff0c;在windows11上都不太行。下面介绍一个在windows11上有效的方法&#xff0c;先看看效果图吧。如下&#xff1a; 在最新windows11上面 在较新…

Python之Requests库使用总结

概述 Requests是python中一个很Pythonic的HTTP库&#xff0c;用于构建HTTP请求与解析响应 Requests开发哲学 Beautiful is better than ugly.(美丽优于丑陋) Explicit is better than implicit.(直白优于含蓄) Simple is better than complex.(简单优于复杂) Complex is bett…

windows安装pyskl

一.前提条件 先安装好anaconda&#xff0c;pycharm 二.下载好pyskl代码 pyskl地址&#xff1a; 三.环境安装 conda create -n pyskl python3.8 conda activate pyskl先看下requirements.txt中需要安装的包 有些包是需要单独安装的&#xff0c;如pytorch,这个根据自己cuda…

DSP28335之CAN通信易错点总结

一、CAN初始化流程 ①接收发送引脚初始化&#xff1b; ②接收和发送邮箱设置&#xff1b; ③邮箱使能&#xff1b; ④波特率配置&#xff1b; ⑤接收掩码设置&#xff1b; ⑥中断配置。 二、几个重要的知识点 ①影子寄存器 因为ECanbRegs是不可以单独对位操作&#xf…

PHP操作ZIP之ZipArchive类以及如何避免生成压缩文件带有目录层级的问题

常用的方法 php ZipArchive可以说是php自带的一个函数了&#xff0c;他可对对文件进行压缩与解压缩处理&#xff0c;但是使用此类之前我们必须在php.ini中把extensionphp_zip.dll前面的分号有没有去掉&#xff0c;然后再重启Apache这样才能使用这个类库。 ziparchive 可选参数…

嵌入式培训-Linux系统及C编程高级-DAY1718-编译器

GCC编译器 GCC简介 GCC 原名为 GNU C 语言编译器&#xff08;GNU C Compiler&#xff09;&#xff0c;只能处理 C 语言。但其很快扩展&#xff0c;变得可处理 C&#xff0c;后来又扩展为能够支持更多编程语言&#xff0c;如 Fortran、Pascal、Objective -C、Java、Ada、Go 以及…

最强文生图跨模态大模型:Stable Diffusion

文章目录 一、概述二、Stable Diffusion v1 & v22.1 简介2.2 LAION-5B数据集2.3 CLIP条件控制模型2.4 模型训练 三、Stable Diffusion 发展3.1 图形界面3.1.1 Web UI3.1.2 Comfy UI 3.2 微调方法3.1 Lora 3.3 控制模型3.3.1 ControlNet 四、其他文生图模型4.1 DALL-E24.2 I…

作业12.12

1.闹钟 主函数 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);t new QTimer(this);idstartTimer(1000);speecher new QTextToSpeech(this); }Widget::~Wid…

IO进程线程day8

作业 1> 使用三个程序来完成输出 ABCABCABCABCABC #include<myhead.h> #include"sem.h" #define PAGE_SIZE 4096 int main(int argc, const char *argv[]) {int semidcreate_sem(3);printf("semid%d\n",semid);if(semid-1){perror("create…

WPF-附加属性《十二》

非常重要 依赖属性和附加属性&#xff0c;两者是有关系的&#xff0c;也是有些区别的&#xff0c;很多时候&#xff0c;可能会把两者混淆了。 附加属性&#xff08;Attach Property&#xff09; 顾名思义&#xff0c;就是附加上面的属性&#xff0c;自身是没有的&#xff0c;…

boost graph之基础

结构 属性相关 #mermaid-svg-PZQvKfbwNSnyXO9g {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-PZQvKfbwNSnyXO9g .error-icon{fill:#552222;}#mermaid-svg-PZQvKfbwNSnyXO9g .error-text{fill:#552222;stroke:#5522…

21、pytest参数化中标记单独的测试用例

官方实例 # content of test_expectation_xfail import pytestpytest.mark.parametrize("test_input, expected",[("35",8),("24",6),pytest.param("6*9",42,markspytest.mark.xfail)], ) def test_eval(test_input, expected):asser…

2023-12-12 AIGC-AI工具的基本工作原理

摘要: 2023-12-12 AIGC-AI工具的基本工作原理 AI工具的基本工作原理 AI工具的基本工作原理涉及到一系列复杂的技术和算法。这些原理可以根据不同类型的AI工具进行概括&#xff0c;包括机器学习、自然语言处理、图像识别等。以下是一些关键的AI工具及其工作原理的概述&#xff…

类加载机制与反射

类加载机制与反射 一.虚拟机类加载机制 1.虚拟机类加载机制概述 虚拟机把描述类的数据从class文件加载到内存 将类的数据进行校验,转换解析和初始化 形成可以被java虚拟机直接使用的java类型 2.类加载过程 当程序要使用某个类时,如果该类还未被加载到内存中,系统会通过加…

WEB渗透—PHP反序列化(一)

Web渗透—PHP反序列化 课程学习分享&#xff08;课程非本人制作&#xff0c;仅提供学习分享&#xff09; 靶场下载地址&#xff1a;GitHub - mcc0624/php_ser_Class: php反序列化靶场课程&#xff0c;基于课程制作的靶场 课程地址&#xff1a;PHP反序列化漏洞学习_哔哩…

Datawhale聪明办法学Python(task2Getting Started)

一、课程基本结构 课程开源地址&#xff1a;课程简介 - 聪明办法学 Python 第二版 章节结构&#xff1a; Chapter 0 安装 InstallationChapter 1 启航 Getting StartedChapter 2 数据类型和操作 Data Types and OperatorsChapter 3 变量与函数 Variables and FunctionsChapte…

手拉手探索JSONCrack数据可视化

JSON Crack数据可视化工具 官网&#xff1a;https://jsoncrack.com/ 项目地址&#xff1a;https://github.com/AykutSarac/jsoncrack.com SON Crack 是一个很方便的 JSON 数据可视化工具。 该项目不是简单的展示 JSON 数据,而是将其转化为类似思维导图的形式,支持放大/缩小、展…