VUE实现限制输入框最多输入15个中文,或者30个英文
vue项目,输入框限制输入15个中文,或者30个英文
<input type="text" v-model="groupName" class="edit-input" ref="groupName"
@input="changeValue"
@change="editGroupNameSave(groupInfo.name)" >
changeValue () {
let leng = this.validateTextLength(this.groupName)
if (leng >= 15) {
this.$refs.groupName.maxLength = leng
} else {
this.$refs.groupName.maxLength = 30
}
},
validateTextLength (value) {
// 中文、中文标点、全角字符按1长度,英文、英文符号、数字按0.5长度计算
let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/g
let mat = value.match(cnReg)
let length
if (mat) {
length = (mat.length + (value.length - mat.length) * 0.5)
return length
} else {
return value.length * 0.5
}
}
参考: https://www.jianshu.com/p/17edabad526e
VUE实现限制输入框最多输入15个中文,或者30个英文的更多相关文章
- 解决Vue中element-ui输入框无法输入问题
<el-input placeholder="请输入内容" v-model="input3" class="input-with-select& ...
- vue 如何将输入框的输入自动小写转大写(使用 v-model 时采取另一种方式)
前言:小写转大写,可以用过滤器实现,但当使用 v-model 时就不行了,这里有解决方案.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9289205.html ...
- vue 前端判断输入框不能输入0 空格。特殊符号。
oninput="value=value.replace(/[^\d.]/g,'').replace(/\.{2,}/g,'.').replace('.','$#$').replace(/\ ...
- html 输入框 只能输入数字 只能输入字母数字组合
JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'' ...
- input输入框限制输入正整数、小数、字母、文字
有的时候需要限制input的输入格式: 例如,输入大于0的正整数 <input onkeyup="if(this.value.length==1){this.value=this.va ...
- 从一次输入框无法输入的bug,谈如何限制输入框输入类型
bug的产生和修改 上周临近周末休息的时候,一个同事跑过来了,对我说:"阿伦啊,有一个页面出问题了,火狐浏览器所有的input都没法输入了."我一听,是不是你给加了什么属性,让in ...
- input输入框只能输入正整数、字母、小数、汉字
只需将需要的代码加入到input输入框中,即可使用! 1,文本框只能输入数字代码(小数点也不能输入) 代码如下: <input onkeyup="this.value=this.val ...
- input 输入框 只能输入数字、字母、汉字等
1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...
- JS实现输入框只能输入数字
键盘下落事件实现输入框只能输入数字: <script type="text/javascript"> // 实现输入框只能输入数字 function ValidateN ...
随机推荐
- java: (正则表达式,XML文档,DOM和DOM4J解析方法)
常见的XML解析技术: 1.DOM(基于XML树结构,比较耗资源,适用于多次访问XML): 2.SAX(基于事件,消耗资源小,适用于数量较大的XML): 3.JDOM(比DOM更快,JDOM仅使用具体 ...
- Postman接口测试动态传参——动态获取token值
上午刚学会jmeter动态传参,下午研究了下postman也知道怎么动态获取token了. 主要就是第1行和第2行代码,第3行加上是希望Test Results有个返回值,如果不加第3行运行成功后也看 ...
- eureka和zookeeper的区别?
eureka和zookeeper都可以提供服务注册与发现的功能, zookeeper 是CP原则,强一致性(consistency)和分区容错性(Partition). eur ...
- CentOS 7 Tomcat 启动后 外部无法访问的问题
1.启动tomcat 2. 验证tomcat 是否启动成功 ps -ef|grep tomcat 这样是启动成功了的 3 检查防火墙是否启动 firewall-cmd --state 防火墙 已 ...
- backbone.js 教程(1) View & Model & Collection
Backbone.js Overview 它由Jeremy Ashkenas开发,最初发行于2010-10-13 它是一个轻量的JavaScript类库,只依赖于underscore.js,非强制依赖 ...
- 100+ Python挑战性编程练习(1)
目前,这个项目已经获得了7.1k Stars,4.1k Forks. 初级水平是指刚刚通过Python入门课程的人.他可以用1或2个Python类或函数来解决一些问题.通常,答案可以直接在教科书中找 ...
- [百度百科]PCI-E的速度
在早期开发中,PCIe最初被称为HSI(用于高速互连),并在最终确定其PCI-SIG名称PCI Express之前,将其名称更改为3GIO(第三代I / O). 名为阿拉帕霍工作组(AWG)的技术工作 ...
- 集成学习-Adaboost 进阶
adaboost 的思想很简单,算法流程也很简单,但它背后有完整的理论支撑,也有很多扩展. 权重更新 在算法描述中,权重如是更新 其中 wm,i 是m轮样本i的权重,αm是错误率,Øm是第m个基学习器 ...
- php 数组助手类
ArrayHelper.php <?php /** * php 数组助手类 * Class ArrayHelper * @package app\helper */ class ArrayHel ...
- RabbitMQ入门教程(九):首部交换机Headers
原文:RabbitMQ入门教程(九):首部交换机Headers 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog ...