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个英文的更多相关文章

  1. 解决Vue中element-ui输入框无法输入问题

    <el-input placeholder="请输入内容" v-model="input3" class="input-with-select& ...

  2. vue 如何将输入框的输入自动小写转大写(使用 v-model 时采取另一种方式)

    前言:小写转大写,可以用过滤器实现,但当使用 v-model 时就不行了,这里有解决方案.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9289205.html ...

  3. vue 前端判断输入框不能输入0 空格。特殊符号。

    oninput="value=value.replace(/[^\d.]/g,'').replace(/\.{2,}/g,'.').replace('.','$#$').replace(/\ ...

  4. html 输入框 只能输入数字 只能输入字母数字组合

    JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'' ...

  5. input输入框限制输入正整数、小数、字母、文字

    有的时候需要限制input的输入格式: 例如,输入大于0的正整数 <input onkeyup="if(this.value.length==1){this.value=this.va ...

  6. 从一次输入框无法输入的bug,谈如何限制输入框输入类型

    bug的产生和修改 上周临近周末休息的时候,一个同事跑过来了,对我说:"阿伦啊,有一个页面出问题了,火狐浏览器所有的input都没法输入了."我一听,是不是你给加了什么属性,让in ...

  7. input输入框只能输入正整数、字母、小数、汉字

    只需将需要的代码加入到input输入框中,即可使用! 1,文本框只能输入数字代码(小数点也不能输入) 代码如下: <input onkeyup="this.value=this.val ...

  8. input 输入框 只能输入数字、字母、汉字等

    1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...

  9. JS实现输入框只能输入数字

    键盘下落事件实现输入框只能输入数字: <script type="text/javascript"> // 实现输入框只能输入数字 function ValidateN ...

随机推荐

  1. Ubuntu基础设定:openssh-server安装和使用

    记录一下Ubuntu17.10的openssh-server的安装和使用.安装之后就可以使用ssh登陆Ubuntu了,所以是Ubuntu的基础设定之一. 事前准备 Ubuntu版本:17.10 dev ...

  2. 爬虫六之爬取猫眼电影top100

    该爬虫比较简单,代码放在github上 https://github.com/GhostSteven/Crawler/tree/master/maoyantop100

  3. jquery validate 自定义校验方法

    1.引入JS jquery.min.js jquery.validate.min.js messages_zh.min.js 2.添加验证方法,第一个参数为验证方法的名称,第二个参数为验证方法. $. ...

  4. [百度百科]PCI-E的速度

    在早期开发中,PCIe最初被称为HSI(用于高速互连),并在最终确定其PCI-SIG名称PCI Express之前,将其名称更改为3GIO(第三代I / O). 名为阿拉帕霍工作组(AWG)的技术工作 ...

  5. 洛谷P1600 天天爱跑步——题解

    题目传送 首先要考虑入手点.先考虑一个一个玩家处理,显然不加优化的话,时间复杂度是O(n)的.发现对于玩家路径上的点都有一个观察员,一个都不能忽视,看起来是很难优化了.在做题时,发现一个思路很难想,就 ...

  6. 一道最大公约数的题:easy number

    现有n个Zack,每个Zack有一个一个能力值,从这n个Zack中选出k个,使他们的最大公约数的值最大 [输入格式] 第一行有一个整数n,代表有n个Zack 第二行n个整数ai,代表每个Zack的能力 ...

  7. P1142轰炸

    这是uva上的一道模拟题. 首先给出n(n<=700)个点的坐标(坐标在1*10^9)之内,询问走直线可以经过的点数.一开始我想到了一个类似于桶排序的方法来存坐标,但是要注意数组大小啊!第二次想 ...

  8. Windows7下Pycharm安装Keras

    1.安装Anaconda3 2.安装Pycharm 3.安装TensorFlow 一.File -> Settings -> Install 二.搜索TensorFlow -> In ...

  9. mongodb数据库怎么迁移

    迁移方法一 使用mongo自带命令来迁移数据,思路是先导出集合数据再导入到数据库中 导出命令:mongoexport 语法:mongoexport -d dbname -c collectionnam ...

  10. Linux五大网络IO模型图解

    对于一个应用程序即一个操作系统进程来说,它既有内核空间(与其他进程共享),也有用户空间(进程私有),它们都是处于虚拟地址空间中.用户进程是无法访问内核空间的,它只能访问用户空间,通过用户空间去内核空间 ...