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. [不错]A step-by-step guide to enabling security, TLS/SSL, and PKI authentication in Elasticsearch

    Now posted on the Elastic blog December 12, 2018 update: This article has been published on Elastic’ ...

  2. 使用Spring Initializr初始化SpringBoot项目

    虽然SpringBoot CLI消除了不少设置工作,但如果你更倾向于传统的Java项目结构,那你应该看看Spring Initializr. Spring Initializr从本质上来说就是一个we ...

  3. [JS] 点击按钮触发后台事件前,弹出确认框

    只需要在button中设置onclick属性触发事件即可 下面以ASP.NET代码为例, ASP.NET中按钮客户端触发js代码的属性是OnClientClick <asp:Button ID= ...

  4. [转帖]教你如何修改运行中的docker容器的端口映射

    教你如何修改运行中的docker容器的端口映射   在docker run创建并运行容器的时候,可以通过-p指定端口映射规则.但是,我们经常会遇到刚开始忘记设置端口映射或者设置错了需要修改.当dock ...

  5. Luogu P4602 [CTSC2018]混合果汁

    题目 把果汁按美味度降序排序,以单价为下标插入主席树,记录每个节点的\(sum\)果汁升数和\(val\)果汁总价. 每次询问二分最小美味度,查询美味度大于等于\(mid\)的总体积为\(L\)的最低 ...

  6. gRPC编译教程

    windows平台的编译 一.编译openssl ① 安装perl(可以使用ActivePerl),执行perl Configure VC-WIN64A no-asm .在这里解释一下参数含义,VC- ...

  7. homestead安装swoole扩展

    配置好ubuntu的国内镜像源并更新 查看php版本,并安装对应php版本的dev sudo apt install php7.2-dev 配置pecl sudo pecl channel-updat ...

  8. Head First PHP&MySQl第二章代码

    PHP: <html> <head> <title>外星人绑架了我--报道一起绑架</title> </head> <body> ...

  9. LeetCode 338. 比特位计数

    338. 比特位计数 题目描述 给定一个非负整数 num.对于 0 ≤ i ≤ num 范围中的每个数字 i ,计算其二进制数中的 1 的数目并将它们作为数组返回. 示例 示例 1: 输入: 2 输出 ...

  10. jsp页面中JSTL如何处理日期格式

    引入fmt标签 <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 格 ...