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. CTF—攻防练习之FTP服务后门

    主机:192.168.32.152 靶机:192.168.32.156 首先查看靶机开放的端口: nmap 192.168.32.156 nmap  -T4 -A -v 192.168.32.156 ...

  2. 小型自动化运维工具pssh和传输工具rsync

    一.简单介绍 1.pssh全称是parallel-ssh,基于Python编写的并发在多台服务器上批量执行命令的工具.包括pssh,pscp,prsync,pnuke和pslurp.该项目包括pssh ...

  3. 【Ruby on Rails 学习六】Ruby 类 的入门

    1.什么是类 2.类与实例的区别 3.自定义简单的类 生活中的垃圾分类,是集合上的概念 比如数学上的   1  a  2  b  c  4  5分类为数字1 2 4 5 ,字母  a  b  c ir ...

  4. python 三元运算、列表推倒式、字典推倒式、生成器生成式

    1.三元运算 name=input('姓名>>: ') res='SB' if name == 'alex' else 'NB' print(res) 2.列表推倒式 #1.示例 egg_ ...

  5. Excel使用技巧大全(超全)

    目录 Excel 使用技巧集锦 --163 种技巧 一. 基本方法 1. 快速选中全部工作表 2. 快速启动 Excel 3. 快速删除选定区域数据 4. 给单元格重新命名 5. 在 Excel 中选 ...

  6. CF 1136B Nastya Is Playing Computer Games

    题目链接:codeforces.com/problemset/problem/1136/B 题目分析 首先,读完题目,看了是个B题,嗯嗯...... 果断找规律,然后交了一波,居然过了!!! 代码区 ...

  7. VS Code Python 全新发布!Jupyter Notebook 原生支持终于来了!

    VS Code Python 全新发布!Jupyter Notebook 原生支持终于来了! 北京时间 2019 年 10 月 9 日,微软发布了全新的 VS Code Python 插件,带来了众多 ...

  8. 17.AutoMapper 之配置(Configuration)

    https://www.jianshu.com/p/031ff68797dd 配置(Configuration) 通过构造函数创建并初始化MapperConfiguration实例: config = ...

  9. npm学习(四)之如何安装全局包、更新全局安装的包、卸载全局安装的包

    如何安装全局包 有两种方式用来安装 npm 包:本地安装和全局安装.选用哪种方式来安装,取决于你如何使用这个包. 如果你想将其作为一个命令行工具,那么你应该将其安装到全局.这种安装方式后可以让你在任何 ...

  10. 移除数组中指定键(Yii2)

    /** * 移除数组中指定key * @param $data * @param $key * @return array */ public static function removeKey($d ...