vue项目 el-input输入框字符限制，兼容中英文及数字

最新推荐文章于 2024-08-07 11:59:22 发布
最新推荐文章于 2024-08-07 11:59:22 发布
阅读量1.7w 收藏 8
点赞数
分类专栏： 前端学习 文章标签： vue el-input 字符限制兼容中英文及数字
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weiminquan/article/details/90721708
版权

开发中，常常会有限制输入框字符数量的需求，而中文和英文及数字所占的字符是不一样的，大致可以按中文：英文及数字-3:1；

如果使用maxlength=“6”，是不会兼容中英文及数字的，如果数据库限制6个字符，用户输入的是6个中文，接口报500，这个是时候就要自己封装一个方法来使用；下面是一个简单的封装：

（仅供参考，前端新手之作）

wei-jason
关注
专栏目录
el-input输入框根据字节限制输入长度（中文占两字节，数字英文占一字节）
qq_41518803的博客
05-11 1188
需求：某个字段需要限制输出长度 字符长度小于64个VARCHAR2(64)，这一眼就看出来是数据库的限制，数据库是根据字节做的限制，而前端组件el-input的限制长度（maxlength）只能限制字符串的长度，无法直接限制字节，所以我封装了一个方法，以下是具体代码。我把这个方法封装在通用方法中 commonUtils.js，下面是commonUtils.js的代码。在main.js引用，然后注入到原型，以后可以直接使用该方法。
input只能输入数字英文字母汉字
12-24
input只能输入数字英文字母汉字
限制el-input可输入字符
最新发布
m0_46714106的博客
08-07 375
限制el-input输入字符
vue项目 el-input输入框字符限制，只显示英文及数字
qq_39967527的博客
04-14 1万+
element的el-input没有限制输入的内容，想要限制输入内容就需要自己来开发，我使用的方式是正则来判断进行再次赋值实现的， 不废话上代码； <el-input v-model="accountVal" maxlength="24" @input="accountInput" placeholder="请输入用户账号"></el-input> 通过监控输入框的事实输...
限制输入框字符数（中英文区分）
weixin_30300523的博客
07-03 462
满足复制粘贴时的字符判断，中文输入时判断； 使用： vue、element-ui <el-input type="textarea" v-model="versionForm.notes" v-on:input="checkLength(versionForm.notes)"></el-input> 限制方法： // 判断版本更新内容输入字节是否大于50...
vue input 限制字节长度为50个字节（25个汉字，50个英文字符）
最初都是小白
04-09 9766
在input的change事件中调用此方法： html: 直接使用 <vs-input class="w-full" v-model="formData.goodsAlias" placeholder="请输入名称" @input="changeValue('goodsAlias')" //调用方法 @keyup.enter="changeValue('goodsAlias')" //回车键 /> 配合maxlength属性进行使用 &
antd-vue input 限制
偏执的小男孩儿
05-27 226
antd-vue input 限制
解决vue中监听input只能输入数字及英文或者其他情况的问题
10-18
在Vue开发过程中，我们经常会遇到需要限制用户在input框中只能输入特定格式字符的需求，例如仅允许输入数字和英文字符。为了实现这一点，开发者会采取不同的方法来监听和限制用户的输入行为。 首先，了解Vue.js框架...
el-input输入框只能输入数字和英文，可以输入其它特殊字符，只不允许输入%
07-28
这样，el-input 输入框就会限制只能输入数字和英文，允许输入其他特殊字符但不允许输入%。 注意：上述代码是基于 Vue.js 和 Element UI 的示例，你需要在你的项目中引入 Vue.js 和 Element UI 才能正常运行。如果你...
el-input输入框只能输入数字和英文，不允许输入%
07-28
如果你正在使用 Element UI 的 el-input 组件，并且想要限制输入框只能输入数字和英文，不允许输入特殊字符如 %，可以使用以下方法： 1. 使用正则表达式进行校验：在 el-input 组件的输入事件中，使用正则表达式对...
vue中对el-input输入的内容进行正则判断，两个字符中间有分隔符验证，楼层输入格式修改正则转换，判断前后字符之间，使用的是否为、：|/-如果不是则会取消
qq_41180882的博客
02-28 882
在vue中将输入的内容进行正则格式转换，这里主要是用来做楼层转换，传给后端的必须是某些格式，其中存数字，中间带、：|/-都可以，其他不行比如2-3这样，还会对总楼层等进行判断
Vue中实现input输入框字数限制
热门推荐
星晚的博客
01-30 2万+
先放效果图: vue代码如下: <el-form-item label="活动标题" class="flex-100" prop="title"> <el-input v-model="dataInfo.title" class="cms-width" type='required' maxlength="150" @input="descInput"></el-input> <span class="gray"> 字数限制:{{ente
vue3 antd项目实战——input输入框限制输入内容和长度，Form表单动态校验规则
XSL_HR的博客
12-27 1万+
vue3 antd项目实战中，限制input输入框的输入内容和输入长度，并为From表单添加动态校验规则，设置输入框输入内容不能为空。
分别限制el-input输入框中英文个数
HongHamster的博客
11-06 669
需求：修改主标题限制中文30个字符，英文60个字符；副标题限制中文40个字符，英文80个字符
Vue 限制输入框输入的字符数 （中英文 中=1 英=0.5）
ManArs的博客
07-27 706
main.js添加 Vue.prototype.widthCheck = function(str, len) { // 限制输入框输入的字符数 let temp = 0; for (let i = 0; i < str.length; i++) { if (/[\u4e00-\u9fa5]/.test(str[i])) { temp += 2; } else { temp++; } if (temp > len) { .
Vue前端开发中的输入限制与输入规则探究
Sun_blog
09-20 4628
在Vue前端开发中，我们经常需要对用户的输入进行限制和规范，以确保数据的准确性和安全性。本文将介绍如何使用Vue的el-input组件来实现输入限制和输入规则，并提供相应的代码示例。通过使用el-input组件的属性和自定义方法，我们可以实现对用户输入的限制和规范。无论是简单的长度限制还是复杂的正则表达式验证，Vue提供了灵活的方式来满足我们的需求。合理的输入限制和规则不仅可以提升用户体验，还可以保证数据的准确性和安全性。
element input，一个中文占3个字符
萝卜芹菜芽
07-05 828
代码如下，可直接复制预览。
el-input只能输入数字_为什么密码都是由英文和数字符号组成？终于知道原因了...
weixin_39800918的博客
12-21 892
互联网时代，我们会登陆各种大大小小的APP、网站，登录时需要输入用户名和密码，用户名的形式可以是中文、数字、英文，而密码却只能设置英文、数字和标点符号，好像从来不支持设置中文密码，这是为什么呢？01 实现难度比较大首先，很多人可能会产生一个误区，觉得之所以不用中文是因为编码太复杂，技术上实现不了。其实密码是可以输入中文的，就像一开始的QQ的密码就是可以设置成中文的，只是实现难度上会...
正则表达式，el-input格式控制：输入框输入数字和小数
weixin_44821114的博客
10-18 2825
3.输入数字并且可以自行改变输入保留几位小数,并且禁止第二个"."的输入。1.只能输入0和正整数,不能输入小数和负数。
vue el-input输入框限制输入整数数字
01-18
你可以通过给输入框添加一个blur事件来限制输入整数数字。在输入框失去焦点时，可以使用Number()函数将输入的内容转换为数字。以下是一个示例代码： ```html <el-input v-model="value" @blur="value=Number(value)...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值