elementui el-input正则表达式使用onkeyup事件，只可输入小数类似12.22等

最新推荐文章于 2024-06-11 13:57:25 发布

Dylan长点薪把

最新推荐文章于 2024-06-11 13:57:25 发布

阅读量1.8k

点赞数 1

文章标签： elementui 正则表达式前端

本文链接：https://blog.csdn.net/qq_41040413/article/details/121038502

版权

方法一.<input οnkeyup="this.value=this.value.replace(/[^(\d||/.)]/g," " >

方法二.<input οninput="this.value=this.value.replace(/[^(\d||/.)]/g," " >

感觉方法二换一个事件兼容性比较好

如果是只能输入数字的话

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Dylan长点薪把

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
elementui el-input正则表达式使用onkeyup事件，只可输入小数类似12.22等

<input onkeyup="this.value=this.value.replace(/[^(\d||/.)]/g," ">
复制链接

扫一扫

使用正则限制input框只能输入数字/英文/中文等等

10-26

限制input框只能输入数字或英文的方法有很多，下面为大介绍下使用正则是如何实现的，感兴趣的朋友不要错过

在el-input中添加onkeyup使用中文输入法导致验证失效

高电平的博客

08-07

2408

之前只是将el-input中的值替换为空，在中文输入法的情况下替换后，里面的值变为了一个新的变量，表单校验监听不到这个新的变量，所以会不通过校验，更改后将替换后的变量赋给el-input绑定的变量，再把它回调给el-input的value，这样就能监听到这个替换后的变量了。由于需求需要对el-input添加输入校验，只允许用户输入数字，其他内容输不上去，我采用了在中添加onkeyup ="value=value.replace(/[ ^ 0-9.]/g,‘’)"来对输入进行校验，......

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

在 el-input 中添加 onkeyup 使用中文输入法导致验证失效

最新发布

前端，请指教

06-11

213

之前只是将 el-input 中的值替换为空，在中文输入法的情况下替换后，里面的值变为了一个新的变量，表单校验监听不到这个新的变量，所以会不通过校验，更改后将替换后的变量赋给 el-input 绑定的变量，再把它回调给 el-input 的 value，这样就能监听到这个替换后的变量。当输入为非数字时会被""替换掉，但是使用中文输入法时，虽然也能过滤非数字，但是过滤之后表单的非空验证不通过。由于需求需要对 el-input 添加输入校验，只允许用户输入数字，其他内容输不上去，我采用了在中添加。

el-input的onkeyup解决报错Uncaught ReferenceError: xx is not defined at HTMLInputElement.onkeyup

qq_38769403的博客

04-21

2701

需求：在输入框输入时校验输入字符，中英文时校验方式不同（languageStatus == 0）中文情况下只能输中文汉字（languageStatus == 1）英文情况下只能输英文字母，短横线，单引号和空格初始实现：众所周知，没有条件判断的时候可以直接用  <el-input v-model.trim="value" onkeyup="value = value.replace(/[^\u4e00-\u9fa5]/g,

elementui 表单只能输入数字校验

偏执

07-18

747

只能输入数字或小数且第一位不能是0和点且只能有一个点。开头不能为0，并且不能输入小数。只能输入小数—两位小数。

element-ui 的input组件 @keyup.enter事件的添加办法

weixin_30457065的博客

04-24

268

<el-input placeholder="请输入密码" type="password" @keyup.enter.native="login" v-model.trim="loginForm.password"> <template slot="prepend">密码</template> &l...

element-ui 中的el-input 添加keyup、keydown、keypress等键盘事件的注意的点

yang5687810的博客

09-24

7330

element-ui 中的el-input 按照vue官方API添加键盘事件不生效，这是因为在el-input 的input外边封装了一层div。只要在事件后边加上.native()就可以了 <el-input placeholder="请输入内容" @keyup.enter.native="on_filter"></el-input> ...

JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金) 两位小数

10-22

在JavaScript中，我们经常需要限制用户在input输入框中输入...总之，在使用正则表达式进行输入限制时，应根据实际情况灵活编写和调整正则表达式，以确保输入的数据既符合格式要求，又能够灵活应对用户的各种输入情况。

只能输入正整数的正则表达式及常用的正则表达式

12-30

input type='text' id='SYS_PAGE_JumpPage' name='SYS_PAGE_JumpPage' size='3' maxlength='5' onkeyup='this.value=this.value.replace(/[^1-9]/D*$/,)' ondragenter=return false onpaste=return !clipboardData....

js正则表达式验证密码强度【推荐】

10-20

本文详细介绍了如何使用JavaScript语言结合正则表达式来验证密码强度，并通过实例代码的形式对这一技术进行了演示。通过本文的介绍，我们可以了解到如何通过编写正则表达式，根据不同的密码规则来判断密码强度，并...

el-input限制只能输入数字

zhf_123666的博客

11-11

2318

el-input限制只能输入数字 - 不是不爱睡觉 - 博客园输入框中限制通常有三种处理方法：第一种：设置type属性（不推荐）设置type属性为number，text等等，此方法输入框的后面会有不必要样式出现 <el-input type="number"></el-input> 第二种：在属性中添加onkeyup或者oninput进行正则判断 onkeyup，oninput，onchange各有好坏，在这里，推荐onkeyup，在要求不是太高的系统中可以

用正则表达式使el-input只能输入正数

weixin_41683949的博客

03-19

2541

我们设置type为number时确实可以防止字母或者其他字符的输入，但是e这个字母其实在数学上是一个无限不循环小数来的，所以我们设置输入框为number时也是可以输。而且还有可以输入02.1或者1.2.3这种情况，对于一些金额或者其他的需求，这种格式其实不是很好。将type改为text，通过正则表达式让el-input只能输入正数 <el-input type="text" size="mini" v-model.trim="value" placeholder="请输入"

Element UI el-input 限制只能输入正数，小数点后输入N位(可自定义保留位数)

大左的博客

12-01

2020

业务实现场景 HTML部分： oninput(form.priceRateForeign, 4) 参数1：绑定的值参数2：保留小数的位数 <el-form-item v-if="qualityQtypeCode == '2'" label="返点:"> <el-input @keyup.native="form.priceRateReturn = oninput(form.priceRateReturn, 2)" v-model="form.priceRateRe

vue element-ui input输入框绑定@keyup回车事件无效

honeymoon_的博客

06-22

1559

由于element-ui把input进行了封装，对于el-imput，使用 @keyup.enter是无效的，因此，要加上native限制符。 element ui: <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2" @keyup.enter.native="search"> </el-input> 原生input不用： <input

elementui的el-input校验正则表达式

liuyuan_java的专栏

02-17

3091

elementui的el-input校验正则表达式

element-ui 输入框键盘回车事件导致页面刷新

一片天空

09-29

2404

element-ui 输入框键盘回车事件导致页面刷新的处理方法。

ElementUI 组件不支持@keyup 的解决办法

shykevin的博客

03-04

468

一、概述在ElementUI 项目中，使用@keyup.enter事件，发现不生效。 <el-input v-model="SearchData" class="input-with-select" @keyup.enter="SearchKeyDown"> 二、解决方法上面那种写法只适合原生,像组件是不适合用的, 加.native的原因就是为了转成原生 <el-i...

el-input通过onkeyup事件限制只能输入0到1之间的小数

07-22

你可以通过使用onkeyup事件和JavaScript的逻辑判断来限制el-input只能输入0到1之间的小数。以下是一个示例代码： ```html <template> <el-input v-model="inputValue" @keyup="restrictInput"></el-input> </template> <script> export default { data() { return { inputValue: '' }; }, methods: { restrictInput() { let value = parseFloat(this.inputValue); if (isNaN(value) || value < 0 || value > 1) { this.inputValue = ''; } } } } </script> ``` 在这个示例中，我们使用v-model指令将输入框的值与Vue组件中的inputValue数据属性进行双向绑定。当用户键盘按键松开时，会触发restrictInput方法。在该方法中，我们使用parseFloat将输入框的值转换为浮点数，并进行逻辑判断。如果转换后的值不是一个数字或者不在0到1之间，我们将输入框的值清空。这样，当用户输入一个不在0到1之间的数时，输入框会自动清空。请注意，这只是一个前端验证，后端验证仍然是必要的。