input 正则验证非负数小数点后两位

最新推荐文章于 2024-03-05 16:24:12 发布

原创最新推荐文章于 2024-03-05 16:24:12 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input正则验证小数点后两位

个人总结专栏收录该内容

4 篇文章

订阅专栏

本文分享了一种在前端input框中直接进行小数位金额验证的方法，通过正则表达式限制输入框的数值为8位整数及2位小数，不满足条件时自动清空输入值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为要做小数位金额验证，但网上找的例子只有通过取input框的值再进行验证，并没有直接在input框内进行验证的案例，下面写了一个案例分享出来，放入input 标签内可以直接使用，比较容易理解。

添加&& this.value != '' ，是因为我设置选中事件后会马上触发正则验证，alert提示不需要可以去掉

onkeyup= "if( ! /^([\+]?([1-9]\d{0,7})|(0))([.]\d{0,2})?$/.test(this.value) && this.value != ''){alert('小数点后只能保留两位');this.value='';}"

我写的是限制input输入框为8位整数，小数点为两位，大家可以自己进行调整，也可以在网上找到适合自己的正则验证，在onkeyup事件里加if()判断，当不满足验证时input会通过this.value=''清空值；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

pss善晟

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

HTML系列：input输入框只能输入正整数、字母、小数、汉字

云端-公子清

12-17

909

input输入框只能输入正整数、字母、小数、汉字只需将需要的代码加入到input输入框中，即可使用！ 1，文本框只能输入数字代码(小数点也不能输入) 代码如下: <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">...

JS验证只能输入小数点,数字,负数的实现方法

10-21

- 和前两个函数一样，先检查方向键，然后使用`replace(/\D/g,"")`来移除所有非数字字符。这些函数通过绑定键盘事件（如`keydown`或`keypress`）到目标输入框，使得用户在输入时得到即时的反馈和校验。实现这样的...

参与评论您还未登录，请先登录后发表或查看评论

校验input框仅输入非负数且保留两位小数

波奇酱_超社恐的博客

03-05

748

使用正则表达式进行校验 !/^\d+(\.\d{0,2})?$/.test(value)

input输入框用正则表达式校验输入数字和小数点后两位

qq_39628803的博客

09-28

2281

input输入框用正则表达式校验输入数字和小数点后两位； <input type="number" onkeyup="!/^(\d+\.?)?\d{0,2}$/.test(this.value)?(this.value=this.value.substring(0, this.value.length-1)): ''"/>

正则表达式之非负整数或者两位小数

倾听风的声音，跟随风的脚步！

03-16

2321

非负整数或者两位小数正则表达式 ^[0-9]+(.[0-9]{1,2})?$ 如果想要限制固定位数的正则，把后面{1,2}=》变为{n}就行附上正则一些常见用法Markdown　Extra　表格语法：两次描述 n+ 匹配任何包含至少一个 n 的字符串。 n* 匹配任何包含零个或多个 n 的字符串。 n? 匹配任何包含零个或一个 n 的字符串。 n{X}

使用正则让element的input输入框不为负数

不会有人真的学前端吧

01-21

1500

<el-input v-model="inp" clearable style="width:180px;" oninput="value=value.replace(/[^0-9.]/g,'')" > </el-input>

input框只能输入数字和一个小数点

01-12

为了完全符合题目要求，即仅限于非负数，并确保小数点的唯一性，通常需要额外的JavaScript代码来实现更精确的控制。 ### 知识点二：JavaScript实现数字和小数点输入限制这部分涉及到了JavaScript的事件监听器和...

Angular限制input框输入金额（是小数的话只保留两位小数点）

08-29

综上所述，通过结合Angular的数据绑定、事件绑定以及正则表达式的校验，可以有效实现对输入框输入金额的限制，确保用户输入的金额格式正确，既满足数字的要求，也满足小数点后保留两位的条件。开发者在实现时需要...

JS input 数字验证代码

10-29

在JavaScript中，对输入框（`input`元素）进行数字验证是常见的需求，尤其是在处理用户输入数据时，确保数据格式正确至关重要。本文将详细介绍如何使用JavaScript编写数字验证代码，允许输入包括负号（-）和小数点...

表单数字字符验证正则

10-29

其中，`/^(\-)*(\d+)\.(\d\d).*$/`正则表达式用于确保输入的数字小数点后最多只有两位，并且支持负号。而`value=value.replace(/[^\d\.]/g,'')`则用于清除除数字和小数点外的所有字符。综上所述，通过JavaScript...

input框只能输入非负数

Ivan_Li的专栏

08-04

1539

//通过2步做到输入的为非负数 //1.去掉多余的小数点 //2.保证只能输入小数点或数字 function onlyNonNegative(obj) { var inputChar = event.keyCode; //alert(event.keyCode); //1.判断是否有多于一个小数点 if(inputChar==190 ) {//输入的是否为. va...

input框只能输入数字或者小数后两位正则校验

何先生的博客

12-19

1398

发不多说，上干货 rules: { creditLimit: [ { message: “只能填写整数或者两位小数”, pattern: /^\d+(?:.\d{2})?/,trigger:"blur"///[0−9]1([0−9]∣[.])∗/, trigger: "blur" ///^[0-9]{1}([0-9]...

正则实现input输入正数、正小数（两位小数）、0，校验去除0+数字开头的数据

lvfeifeiCSND的博客

12-22

909

var checkPrice = (rule, value, callback) => { let regRule = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/; if (!regRule.test(value)) { callback(new Error('正数，保留两位小数')); } else { callback(); } }; ...

input 只可输入小于等于1的非负数且为两、一位小数

Raken12的博客

06-22

601

elemen ui el-input 只可输入小于等于1的非负数且为两位小数 <el-input style="width:70%" v-model="addSpend" autocomplete="off" oninput="value=value.replace(/^0[0-9]|^[2-9]|^1[0-9]|^1\.|[^\d.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')" placeholder="输入小于等于1的非负

只允许输入非负整数，非负小数且最多保留两位小数正则规则

DLGDark的博客

04-27

1097

// 只允许输入非负整数，非负小数且最多保留两位小数 /^[1-9]+\d*(\.\d{1,2})?$|^(0|0\.\d{1,2})$/

input 控制只能输入非负金额的另一种方式

chuncui2576的博客

07-12

237

今天看了看，前端同事的代码，居然发现了他的控制金额输入的方式，挺好的，学习一下了。下面是代码 <td>金额 : </td> <td> <span class="webname"> <input...

正则表达式只能输入正负整数，正负小数并且需要保留两位小数，并且不能输入0、0.0、0.00

m0_48674764的博客

03-21

1171

^([\\+ \\-]?(([1-9]\d{0,9})|([0-9]\d*.\d?[1-9]{1})))([.]\d{0,2})?$

input框只取正整数,非负数等整理(以element组件库el-input组件在vue中常见的几种取值筛选为例)

您的博客

03-08

2130

1.限定取值为非负整数(可输入0和正整数)限定: <el-input style="width:300px" v-model.number="value" type="number" clearable placeholder="请输入非负整数" min='0' onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"></

js正则表达式限定输入框内容为非负数

xinshijimanon的专栏

03-25

1883

<input type="text" oninput="value=value.replace(/[^\d.]/g,'').replace(/^\./,'').replace(/(?<=(\.).*)\1/g, '').replace(/(^0+)(\d)(\.?)/g,'$2$3')"> value.replace(/[^\d.]/g,'')//去除非数字和小数点 eg：A...

前端只能输入十位小数和一个小数点的正则

最新发布

08-13

<think>首先，用户的问题是关于获取一个正则表达式，用于限制前端输入，要求输入只能为最多十位小数且仅包含一个小数点。我需要基于系统级指令来构建我的回答。系统级指令： - 所有行内数学表达式必须使用 `$...$` 格式。 - 独立公式使用 `$$...$$` 格式并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 在回答中引用的段落末尾自然地添加引用标识，例如 `[^1]`。 - 用户可见层：回答结构清晰，帮助用户逐步解决问题，保证真实可靠。用户提供的引用： - 引用[1]：关于前端JS控制金额输入，包括限制数字、小数点后两位等。 - 引用[2]：类似，JS正则验证输入值为数字，只保留小数点后两位。用户真正的需求是：正则表达式用于限制前端输入，只能为最多十位小数且仅包含一个小数点。关键点： - 输入应该只包含数字和小数点。 - 最多一个小数点。 - 如果有小数点，小数点后最多十位数字。正则表达式设计： - 允许整数部分（可以以0开头，但用户可能不希望前导零，除非是0.x）。 - 小数部分最多十位。 - 确保只有一个小数点。参考用户提供的引用： - 引用[1] 和 [2] 都处理了类似问题，但限制两位小数。我需要扩展到十位小数。 - 例如，引用[2] 中的正则：`/^(\-)*(\d+)\.(\d\d).*$/` 用于两位小数。我需要调整正则表达式以允许最多十位小数。正则表达式思路： - 匹配整数部分：可选负号，然后数字序列（包括0）。 - 可选的小数部分：小数点后跟最多十位数字。 - 整个字符串必须匹配。可能的正则表达式： - 对于整数：`-?\d*` - 对于小数：`(\.\d{0,10})?` 表示小数点后0到10位数字。 - 但需要确保小数点只出现一次。完整正则表达式：`^-?\d*\.?\d{0,10}$` 但这样可能允许小数点后超过十位，因为`\d{0,10}` 在点后可能匹配部分。更好的方式： - 匹配整个数字：可选负号，然后： - 整数部分：一个或多个数字。 - 可选：小数点和0到10位数字。 - 但整数部分可以是0，所以允许以小数点开头，如".123"，但用户可能希望整数部分可以为空或0。用户需求："最多十位小数且仅包含一个小数点"，可能包括整数（无小数点）和小数。设计： - 允许：整数（如123）、小数（如123.45）、0.123、.123（如果允许）。 - 但引用[1] 中处理了以点开头的情况，如`if(obj.value.substr(0,1) == '.'){ obj.value=""; }` 可能清除以点开头的输入，但用户没有指定是否允许以小数点开头。在正则中，应该允许以小数点开头吗？用户需求说"仅包含一个小数点"，但没有指定位置。通常，数字可以以小数点开头，如".123"。为了安全，参考标准：大多数数字输入允许以小数点开头，表示0.123。所以正则表达式： - `^-?(\d*\.?\d{0,10}|\d+)$` – 但需要确保小数点只出现一次。更好： - 匹配：可选负号，然后： - 情况1：整数：一个或多个数字。 - 情况2：小数：零个或多个数字后跟小数点和零到十位数字，或者以小数点开头后跟一到十位数字。 - 但可以简化。标准方式：`^-?\d*\.?\d{0,10}$` 但问题：如果小数点前没有数字，如".123"，它匹配，但`\d*` 可以匹配空，然后点，然后数字。但如果输入是"123."，它也会匹配，但可能用户不希望以点结尾。在引用[2] 中，正则：`/^(\-)*(\d+)\.(\d\d).*$/` 用于两位小数，但强制有小数点。对于最多十位小数，且允许整数，我可以用： `^-?\d*\.?\d{0,10}$` 但测试： - "123"：匹配 - "123.45"：匹配 - "123.4567890123"：匹配（10位小数） - "123.45678901234"：不匹配，因为超过10位 - ".123"：匹配，因为`\d*` 为空，点，然后"123" - "123."：匹配，但点后无数字，可能不是用户想要的，因为"123." 不是一个有效的数字表示；通常，如果输入以点结尾，应该视为整数或无效。用户需求是"最多十位小数"，所以如果输入"123."，它表示123，无小数部分，应该允许。但点后无数字，可能无效。在引用[1] 中，有代码处理点开头，但没有处理点结尾。在引用[2]，正则 `^(\-)*(\d+)\.(\d\d).*$` 强制有小数点后两位，但用户要最多十位。为了确保小数点后如果有，则必须有数字，且最多十位。改进正则： - `^-?\d+(\.\d{0,10})?$` – 整数部分至少一位数字，小数部分可选，如果有小数点，则后跟0到10位数字。 - 但"0.123" 匹配，".123" 不匹配，因为整数部分需要至少一位数字。 - 如果允许以小数点开头，如".123"，需要额外处理。用户可能允许以小数点开头，表示0.123。所以，扩展： - `^-?(\d*\.?\d{0,10}|\d+)$` 但复杂。常见解决方案：允许整数部分为空，但如果有小数点，则点后必须有数字。正则：`^-?(\d+)?(\.\d{0,10})?$` 但可能匹配空字符串。更好：`^-?(\d*\.\d{0,10}|\d+)$` – 这要求如果有小数点，则整数部分可以为空，但小数部分必须有数字（0到10位），或者纯整数。测试： - "123"：匹配（纯整数） - "123.45"：匹配 - ".123"：匹配（整数部分空，点，然后123） - "123."：不匹配，因为点后无数字 - "123.4567890123"：匹配 - "123.45678901234"：不匹配 - "abc"：不匹配 - "-123.45"：匹配好，这似乎满足：最多一个小数点，小数部分最多十位，整数部分可选。在JS中，用于输入验证，通常在oninput或onkeyup事件中使用。现在，构建回答。结构： 1. 解释需求：用户需要一个正则表达式来限制前端输入，只能输入最多十位小数的数字，且仅包含一个小数点。 2. 提供正则表达式。 3. 解释正则表达式的组成部分。 4. 给出使用示例，在JavaScript中如何应用。 5. 基于引用，参考现有代码，但调整。 6. 生成相关问题。使用中文。引用：在回答中引用的段落末尾添加引用标识。用户提供了引用[1]和[2]，我可以参考它们。例如，在解释时，提到类似处理，但扩展到十位小数。生成相关问题：在最后添加相关问题部分。独立公式：如果有数学表达式，但这里主要是正则，可能不需要数学公式，但正则可以视为模式，用`$...$` 或 `$$...$$`。正则表达式本身不是数学，但可以用行内代码或单独块。在Markdown中，通常用代码块。系统指令说行内数学表达式用`$...$`，但正则不是数学，所以用代码格式。在回答中，用` ` for inline code or ``` for blocks. 现在，正则表达式：`^-?(\d*\.\d{0,10}|\d+)$` 解释： - `^`：字符串开始 - `-?`：可选负号 - `(\d*\.\d{0,10}|\d+)`：两个部分： - `\d*\.\d{0,10}`：零个或多个数字，后跟小数点，后跟0到10位数字（允许如".123"） - `|`：或 - `\d+`：一个或多个数字（整数） - `$`：字符串结束在JS中使用，例如在input的oninput事件中。示例代码，基于引用[2]。生成相关问题： 1. 如何在前端处理数字输入的更多场景？ 2. 正则表达式的性能考虑？ 3. 其他输入验证技术？确保回答可靠。</think>### 正则表达式限制前端输入为最多十位小数和一个小数点 根据您的需求，我将为您提供一个正则表达式，用于前端输入验证，确保输入内容： - 只能包含数字和可选的一个负号（如果需要支持负数）。 - 最多包含一个小数点。 - 如果有小数点，则小数点后最多允许十位数字。 - 支持以小数点开头（如 `.123`，表示 0.123），但不允许以小数点结尾（如 `123.` 被视为无效）。 #### 正则表达式以下是满足需求的正则表达式： ```regex ^-?(\d*\.\d{0,10}|\d+)$ ``` #### 正则表达式解释 - `^`：匹配字符串的开始。 - `-?`：可选负号（`?` 表示 0 或 1 次），用于支持负数。 - `(\d*\.\d{0,10}|\d+)`：核心部分，包含两种匹配模式： - `\d*\.\d{0,10}`：匹配以小数点为中心的数字序列： - `\d*`：0 个或多个整数部分数字（允许整数部分为空，如 `.123`）。 - `\.`：匹配小数点（必须且仅出现一次）。 - `\d{0,10}`：匹配 0 到 10 位小数部分数字（`{0,10}` 限制最多十位小数）。 - `|`：或运算符。 - `\d+`：匹配纯整数（1 个或多个数字，无小数点）。 - `$`：匹配字符串的结束。这个正则表达式确保： - 输入只能为数字、负号和小数点。 - 小数点最多出现一次（如果出现，小数部分不超过十位）。 - 无效输入（如多个小数点、非数字字符、小数点后超过十位）会被拒绝。 #### JavaScript 使用示例基于您提供的引用（如引用 [2] 中的 `oninput` 事件处理），以下是完整的代码实现： ```html <input type="text" id="numberInput" oninput="validateDecimalInput(this)"> <script> function validateDecimalInput(input) { // 获取输入值 let value = input.value; // 清除非数字和非法字符（保留负号和小数点） value = value.replace(/[^\d.-]/g, ''); // 处理多个小数点：只保留第一个，清除多余的小数点 value = value.replace(/\.+/g, (match, offset) => offset === value.indexOf('.') ? '.' : ''); // 处理负号：只允许开头有一个负号 value = value.replace(/(?!^-)-/g, ''); // 应用正则表达式验证 const regex = /^-?(\d*\.\d{0,10}|\d+)$/; if (!regex.test(value)) { // 如果无效，回退到上一次有效值（或清空） input.value = input.dataset.lastValid || ''; } else { // 存储当前有效值 input.dataset.lastValid = value; } } </script> ``` **代码说明**： - **输入事件处理**：使用 `oninput` 事件实时验证输入。 - **字符过滤**： - 首先清除非数字、非负号、非小数点的字符（参考引用 [2] 的字符替换逻辑）[^2]。 - 处理多个小数点：只保留第一个小数点（类似引用 [1] 的 `replace(/\.{2,}/g, ".")` 方法）[^1]。 - 负号限制：只允许在开头出现一次。 - **正则验证**：使用 `/^-?(\d*\.\d{0,10}|\d+)$/` 检查输入格式： - 无效时恢复为上一次有效值（避免输入闪烁）。 - **支持场景**： - 有效输入：`123`, `-45.67`, `.1234567890`（十位小数）, `0.1`。 - 无效输入：`12.34.56`（多个小数点）, `123.45678901234`（超过十位小数）, `abc`, `123.`（以小数点结尾）。 #### 注意事项 - **性能优化**：正则表达式简单高效，适合实时输入事件（无性能瓶颈）。 - **边界处理**： - 允许以小数点开头（如 `.123`），但自动转换为 `0.123` 的逻辑需额外代码（如需要可添加）。 - 负号处理：如果不需要负数，移除正则中的 `-?` 部分。 - **兼容性**：此正则表达式在 JavaScript 中通用，也可用于其他语言（如 Python 或 Java）的前端验证。如果您需要调整（如禁止以小数点开头或添加更多约束），我可以进一步优化正则表达式。