Element - ui :el-input 输入只能是数字并且小数点后只能是1-2位

御坂主机 · 发表于 2024-6-16 11:52:18

本帖最后由御坂主机于 2024-6-16 20:35 编辑

1. 简介

在前端开发中，用户输入的格式和内容验证是一个常见需求。在使用Element UI框架时，我们可以通过自定义组件和事件处理来实现el-input输入框仅允许数字输入，并且限制小数点后的位数为1-2位。本文将详细介绍如何实现这一功能。

1.1 Element UI简介

Element UI是一款基于Vue.js的前端UI框架，提供了丰富的组件库，方便开发者快速构建美观、易用的用户界面。el-input是Element UI中用于获取用户输入的基础组件。

2. 实现思路

为了实现el-input输入框仅允许数字输入，并限制小数点后的位数为1-2位，可以通过以下步骤完成：

(1) 使用el-input组件创建输入框。
(2) 监听输入事件，实时验证输入内容。
(3) 使用正则表达式过滤不符合要求的输入内容。

3. 具体实现步骤

3.1 创建el-input输入框

首先，创建一个基本的el-input输入框，并绑定一个Vue数据属性来存储输入内容。

<template>
<div>
<el-input v-model="inputValue" @input="validateInput"></el-input>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
validateInput() {
// 验证逻辑将在此实现
}
}
};
</script>

复制代码

3.2 监听输入事件并验证内容

在validateInput方法中，使用正则表达式来验证输入内容，只允许数字和小数点输入，并限制小数点后的位数为1-2位。

<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
validateInput() {
// 定义正则表达式，匹配整数或带有1-2位小数的数字
const regex = /^[0-9]+(\.[0-9]{1,2})?$/;
if (!regex.test(this.inputValue)) {
// 如果输入内容不符合正则表达式，则移除最后一个字符
this.inputValue = this.inputValue.slice(0, -1);
}
}
}
};
</script>

复制代码

3.3 防止非数字字符输入

为了增强用户体验，可以在输入事件中使用事件对象来阻止非数字字符的输入。修改el-input组件，添加keydown事件处理函数。

<template>
<div>
<el-input v-model="inputValue" @input="validateInput" @keydown="preventNonNumeric"></el-input>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
validateInput() {
const regex = /^[0-9]+(\.[0-9]{1,2})?$/;
if (!regex.test(this.inputValue)) {
this.inputValue = this.inputValue.slice(0, -1);
}
},
preventNonNumeric(event) {
// 允许的按键：数字键、退格键、删除键、左右箭头、小数点
const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', '.'];
if (!allowedKeys.includes(event.key) && !/^[0-9]$/.test(event.key)) {
event.preventDefault();
}
}
}
};
</script>

复制代码

4. 优化体验

为了进一步优化用户体验，可以在失去焦点时（blur事件）验证输入内容，并在必要时修正格式。例如，如果用户输入了"123."，可以自动修正为"123.0"。

<template>
<div>
<el-input v-model="inputValue" @input="validateInput" @keydown="preventNonNumeric" @blur="formatInput"></el-input>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
validateInput() {
const regex = /^[0-9]+(\.[0-9]{1,2})?$/;
if (!regex.test(this.inputValue)) {
this.inputValue = this.inputValue.slice(0, -1);
}
},
preventNonNumeric(event) {
const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', '.'];
if (!allowedKeys.includes(event.key) && !/^[0-9]$/.test(event.key)) {
event.preventDefault();
}
},
formatInput() {
if (this.inputValue.endsWith('.')) {
this.inputValue += '0';
}
}
}
};
</script>

复制代码

5. 总结

通过自定义事件处理和正则表达式验证，可以有效地限制el-input输入框的内容仅为数字，并且小数点后最多两位。本文提供的方法可以确保输入内容的有效性和一致性，从而提高用户体验和数据处理的可靠性。希望本文对你在使用Element UI开发时有所帮助。

------------------------------------------------------------------------------------------------------------------------------------------

======== 御坂主机 ========

>> VPS主机服务器前沿资讯行业发布技术杂谈 <<

>> 推广/合作/找我玩 TG号 : @Misaka_Offical <<

-------------------------------------------------------------------------------------------------------------------------------------------

		自动登录	找回密码
密码			立即注册

[其它] Element - ui :el-input 输入只能是数字并且小数点后只能是1-2位