ElementPlus Input输入正则表达式，只能输入数字和小数

原创已于 2022-07-20 16:17:34 修改 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

于 2022-07-18 11:40:02 首次发布

ElementPlus 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了两种在前端实现输入数值范围验证的方法。第一种利用oninput事件结合正则表达式，实现实时过滤非法字符并限制输入格式。第二种方法是通过定义methods中的RexNum00_99方法进行数值范围检查，并在watch中监听数据变化，当输入不符合要求时，回滚到旧值并显示警告信息。这两种方法都能确保输入值在00.00到99.99的范围内。

第一种方法

直接在oninput中写正则表达式

	<el-input v-model="inputValue" placeholder="0.1" style="width:50px" oninput ="value=value.replace(/[^0-9.]/g,'')">

第二种方法

先写个methods方法

methods:

	RexNum00_99(Num) {
				let result = true
				var numReg = /^[+-]?((\d*(\.\d{0,2})$)|(\d{1,2}$))/ 

				var numRe = new RegExp(numReg)

				if (!numRe.test(Num)) {

					this.$message({

						type: 'warning',

						message: '请输入00.00-99.99的数值 ',

						showClose: true,
					})
					result = false
				}
				return result
			},

然后通过watch监视数据变化来验证

watch:

			inputValue: function(newData, oldData) {
				if (newData != "") {
					if (!this.RexNum00_99(newData)) {
						this.inputValue= oldData
					}
				}
			},