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. VGA显示正圆

    接着上次的随笔,既然VGA时序已经实现了,那么就显示点东西看看吧. 想显示个圆,但是无从下手,参考了这篇文章:https://user.qzone.qq.com/1241003385/blog/154 ...

  2. oracle分页排序,点击下一页数据不刷新

    oracle数据库中,如果每一页的最后一条和次页第一条数据的排序字段重复,会导致排序混乱,出现点击下一页数据不刷新的现象,所以一般排序至少选择一个相对唯一的字段.在前端页面可以输入排序条件的场景中,最 ...

  3. Python 集合的各种操作 数学运算 关系操作 增删改查 生成式

    # 集合是无序的 是可变的 不能重复 允许数学运算 分散存储 # 创建# collegel = {'哲学','经济学','法学','教育学'}## # {'教育学', '经济学', '法学', '哲学 ...

  4. npm学习(六)之如何创建 Node.js 模块

    如何创建 Node.js 模块 Node.js 模块是一种可以发布到 npm 的包.当你创建一个新模块时,创建 package.json 文件是第一步. 你可以使用 npm init 命令创建 pac ...

  5. Scala学习笔记(3)

    数组 ----------------------------------- 0.若长度固定则用Array,若长度可能变化则使用ArrayBuffer 1.提供初始值的时候不要使用new. 2.用() ...

  6. git大全转

    git原理:https://git-scm.com/book/zh/v2 http://blog.xiayf.cn/2013/09/28/learning-git-internals-by-examp ...

  7. Bloom 过滤器

    待续... package com.ghc.mmall.concurrency.nio; import com.google.common.hash.BloomFilter; import com.g ...

  8. 基于SOA的图书商城系统分析

    1.1什么是SOA架构? SOA( Service Oriented Architecture)是一种面向服务的分布式架构,将每个实现特定功能的工程拆分为服务层和表现层.服务层负责处理业务逻辑,对外提 ...

  9. python-函数4(递归、高阶函数)

    python-函数4(递归.高阶函数) 递归 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. 递归特性: 1. 递归必须有一个明确的结束条件 2. 每次进入更深一 ...

  10. VMware® Workstation 设置虚拟机目录和共享目录不要相同!

    在设置VMware的首选项是,工作区中的虚拟机的默认地址和共享虚拟机的位置目录不要设置成一样的. 否则创建的虚拟机打不开.