使用 oninput限制 input输入值 出现空值问题

已于 2022-11-23 15:22:44 修改
阅读量928 收藏 3
点赞数 1
文章标签： javascript node.js
于 2021-09-14 11:02:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41595733/article/details/120282592
版权

例：

<el-input v-model.number="scope.row.count " maxlength="9"
         placeholder="请输入" @change="showInfo(scope.row.count)"></el-input>
</el-form-item>

使用 οninput=“value=value.replace(/[^0-9.]/g,‘’)” 对输入值校验后
example
example

重新输入后发现不能同步更新

解决方法 可使用 $event.target.value 重新赋值

		<el-input v-model.number="scope.row.count " maxlength="9" @blur="scope.row.count = $event.target.value"  oninput="value=value.replace(/[^0-9.]/g,'')"
        	placeholder="请输入" @change="showInfo(scope.row.count)"></el-input>
         </el-form-item>
auserroot
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element input-number 默认值设置为空
02-26
element input-number 当值传入的为''时，默认显示为0，有些情况我们不希望显示0，而是显示为空，针对这种情况我们对element input-number的源码做了兼容处理
vue-pattern-input：使用RegExp限制输入
02-18
Vue模式输入 Vue组件使用RegExp限制用户的输入。 就像本机输入元素一样，您可以添加maxlength class属性。 您也可以使用v-model 。 English | 目录 现场演示 只需单击： 。 包含什么 在下载文件中，您将找到以下目录和文件，对公用资产进行逻辑分组，并提供已编译和最小化的变体。 您会看到以下内容： vue-pattern-input/ ├── ... ├── src/ │ └── /component │ └── pattern-input.vue // core └── /view └── demo.html 参数声明 范围 类型 默认 必需的 描述 regExp 正则表达式 空值 错误的 用于：String.prototype.replace（正则表达式，替换） 替换 细绳 '' 错误的 用于：String.p
火狐浏览器input框value与看到的内容不一样的问题
qq_38524629的博客
08-12 1032
在一次开发中，更新红框中的文案，然后跳转controller并刷新页面，跳转之后发现页面上的内容并没有更改，查看元素发现，input的value是改之后的值，网上相关资料很少，询问前端人员得知，火狐浏览器比较特殊，它默认会缓存input框的值，导致页面看到的和value的值不一致，F5刷新多次还是一样，但ctrl+F5强制刷新可以。彻底解决这个问题的办法是给input加一个属性autocompl...
Vue开发时，循环生成input，对input框进行位数限制或小数位置限制时，input框的值没有正确双向绑定的问题。
陈先生的博客
12-02 838
问题开发时，我们发现在通过循环获取input时，input的值并没有进行双向绑定
在uni-app中，input输入框的输入监听@input事件中，修改输入框内容不生效
hanshiying007的博客
08-30 9664
使用uni-app时，想对input输入框进行输入范围进行限制，如下： <input type="password" v-model="password" @input="passwordFilter" /> passwordFilter:function (event) { let value = event.target.value; if(!value || value == " "){ return ''; } //密码的输入规则是：字母、数字 const rule
JavaScript input输入数值(value)无效的原因和解决办法
热门推荐
l198738655的博客
06-29 1万+
会碰到这个问题一般是想×别人的网页导致的，一般来说想控制别人写的网页(或者维护一份别人的网页代码)碰到需要用JS给input或者select之类的组件赋值的时候一般会直接这样写： 　　let casess=document.getElementsByClassName('xxxxx')[0]; 　　casess.value='50'; 赋值后点击有时候会报错有时候不会，一般报错的情况基本上属于这份代码用了某些前端框架，例如Vue之类的，Vue的input弄个双向绑定啥的，此时我...
解决输入框加正则表达式导致双向绑定失败问题，正则表达式限制输入
weixin_43871857的博客
01-21 768
问题描述： 在开发页面的过程中需要对输入框进行输入值的校验，选择对el-input输入框加正则表达式校验，符合输入值的进行填入不符合输入值不进行回填 //只允许小数点和数字进行输入 <el-input size="mini" maxlength="16" oninput="value=value.replace(/[^0-9.]/g,'')" v-model="form.prices"></el-input> 但是在测试的过程中发现，先在input框中输入文字，文字不回填到
el-input中oninput使用，导致数据没有及时更新问题
m0_52113402的博客
08-25 2559
vue + element
vue element 使用 oninput方法 v-model失效，值为 ‘’，无法绑定
Passerby_K的博客
01-06 2153
效果图： <el-input v-model.number='scope.row.stock' size="small" maxlength="3" show-word-limit oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 0):value.slice(0,3)" @blur="scope.row.stock=Number($event.target.value) "
el-input 使用 oninput输入校验时，v-model数据不更新问题
Mazepk的博客
05-25 3719
描述：当el-input中对输入数据进行校验时，使用oninput后，数据不及时更新或者为空， 并且，如果是校验必填项，还会出现已输入内容，校验不通过的情况 原代码如下： <el-input v-model.number="maxLen" oninput="value=value.replace(/[^0-9]/g,'')" ></el-input> 注： 本例中校验的是正整数，v-model需要使用number，如果校验字符串，需去掉number 报错结果如下： 从图中
vue判断input输入内容全是空格的方法
08-27
下面小编就为大家分享一篇vue判断input输入内容全是空格的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Oracle复合索引与空值的索引使用问题小结
09-09
最近小编在群里讨论sql优化的问题，今天小编给大家带来了Oracle复合索引与空值的索引使用问题小结，需要的朋友参考下吧
Python 实现使用空值进行赋值 None
09-17
主要介绍了Python 实现使用空值进行赋值 None，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
10-15
主要介绍了vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 416
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1009
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 521
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 304
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 412
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
input输入框限制不能输入为空
09-12
### 回答1： 您可以在HTML中使用`required`属性来限制输入框不能为空。例如： ```html <input type="text" name="username" required> ``` 这样，如果用户没有在输入框中输入任何内容，提交表单时会弹出提示要求用户输入内容。 ### 回答2： 输入框限制不能输入为空是为了确保用户输入的数据的正确性和完整性。如果允许用户将输入框留空，可能会导致程序在后续处理中出现错误或异常。 为了实现输入框限制不能输入为空，可以通过以下几种方式来实现： 1. 前端验证：可以使用HTML5中的required属性来设置输入框不能为空。通过在input标签中添加required属性，当用户尝试提交空值时，浏览器会自动进行验证并阻止表单的提交。 例如，将输入框的html代码修改为： <input type="text" required> 2. 后端验证：在提交表单数据之前，在后端进行验证。当用户提交数据为空时，可以在后端对数据进行判断，若为空则返回错误提示信息。后端可以使用各种编程语言来实现验证逻辑。 例如，在后端使用Python语言进行验证： if input == '': return '输入不能为空' 3. JavaScript验证：可以使用JavaScript在客户端对输入框进行实时验证。可以监听输入框的change事件或者使用定时器，当用户输入内容为空时，通过JavaScript给出错误提示。 例如，使用JavaScript的change事件实现验证： var input = document.getElementById('input'); input.addEventListener('change', function() { if (input.value === ''){ alert('输入不能为空'); } }); 综上所述，为了确保数据的正确性和完整性，限制输入框不能为空是一种很重要的验证机制。可以通过前端验证、后端验证或者JavaScript验证来实现对输入框的限制。 ### 回答3： 要限制输入框不能输入为空，我们需要用到一些前端技术。首先，可以使用HTML5的`required`属性来实现输入框的必填验证。 在使用`<input>`元素创建输入框时，可以添加`required`属性，如下所示： ``` <input type="text" required> ``` 当用户提交表单时，如果输入框为空，则浏览器会自动显示一个验证提示，阻止表单的提交。 除了使用`required`属性外，我们还可以使用JavaScript来进行进一步的验证。我们可以在用户提交表单之前，使用JavaScript检测输入框的值是否为空。 首先，给`<input>`元素添加一个唯一的`id`属性，例如： ``` <input type="text" id="myInput"> ``` 然后，使用JavaScript获取输入框的值，并进行验证： ```javascript var inputVal = document.getElementById("myInput").value; if (inputVal.trim() === "") { alert("输入框不能为空"); return false; // 阻止表单提交 } ``` 以上代码将获取输入框的值，并使用`trim()`方法去除首尾空格。如果值为空，则弹出提示框并阻止表单的提交。 综上所述，我们可以使用HTML5的`required`属性和JavaScript来限制输入框不能输入为空。使用`required`属性可以在浏览器中进行基本的验证，而使用JavaScript可以进行更加灵活和自定义的验证。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值