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. 意想不到的JavaScript(每日一题3)

    题目: 答案: 1 4 3 2 解析:

  2. https原理以及golang基本实现

    关于https 背景知识 密码学的一些基本知识 大致上分为两类,基于key的加密算法与不基于key的加密算法.现在的算法基本都是基于key的,key就以一串随机数数,更换了key之后,算法还可以继续使 ...

  3. vue --》elementUI 中 el-table组件 如何实现点击列,让该列高亮显示 ?

    在elmentui官网中,只给了让当前行高亮显示的方法,但是如何让当前列高亮显示呢? <template> <div> <el-table :data="tab ...

  4. break和continue关键字的使用

    一,break和continue关键字的使用 public class BreakContinueTest { public static void main(String args[]) { for ...

  5. springcloud用法

    springcloud用法 使用springcloud搭建微服务肯定要在父工程下面编写子工程 一.搭建eureka注册中心 1.    创建maven项目(在springboot项目下建立子工程eur ...

  6. Who will be punished

    Who will be punished Problem Description This time,suddenly,teacher Li wants to find out who have mi ...

  7. POJ 2492 A Bug's Life 题解

    题面 这道题是一道标准的种类并查集: 种类并查集是给每个结点一个权值.然后在合并和查找的时候根据情况对权值来进行维护. 通过将原有的区间范围变大使并查集可以维护种类的联系: #include < ...

  8. Forsaken给学生分组

    链接:https://ac.nowcoder.com/acm/contest/1221/C来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言5242 ...

  9. linux源码下载

    概要:本文主要介绍ubuntu环境下,内核源码和命令源码的获取方式. 内核源码: 1.最简洁的方式,使用命令:apt-get source linux-$(uname -r).但配置的源服务器中不一定 ...

  10. Doker GRPC "Connection reset by peer"

    https://success.docker.com/article/ipvs-connection-timeout-issue https://forums.docker.com/t/setting ...