VUE实现限制输入框最多输入15个中文,或者30个英文
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个英文的更多相关文章
- 解决Vue中element-ui输入框无法输入问题
<el-input placeholder="请输入内容" v-model="input3" class="input-with-select& ...
- vue 如何将输入框的输入自动小写转大写(使用 v-model 时采取另一种方式)
前言:小写转大写,可以用过滤器实现,但当使用 v-model 时就不行了,这里有解决方案.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9289205.html ...
- vue 前端判断输入框不能输入0 空格。特殊符号。
oninput="value=value.replace(/[^\d.]/g,'').replace(/\.{2,}/g,'.').replace('.','$#$').replace(/\ ...
- html 输入框 只能输入数字 只能输入字母数字组合
JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'' ...
- input输入框限制输入正整数、小数、字母、文字
有的时候需要限制input的输入格式: 例如,输入大于0的正整数 <input onkeyup="if(this.value.length==1){this.value=this.va ...
- 从一次输入框无法输入的bug,谈如何限制输入框输入类型
bug的产生和修改 上周临近周末休息的时候,一个同事跑过来了,对我说:"阿伦啊,有一个页面出问题了,火狐浏览器所有的input都没法输入了."我一听,是不是你给加了什么属性,让in ...
- input输入框只能输入正整数、字母、小数、汉字
只需将需要的代码加入到input输入框中,即可使用! 1,文本框只能输入数字代码(小数点也不能输入) 代码如下: <input onkeyup="this.value=this.val ...
- input 输入框 只能输入数字、字母、汉字等
1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...
- JS实现输入框只能输入数字
键盘下落事件实现输入框只能输入数字: <script type="text/javascript"> // 实现输入框只能输入数字 function ValidateN ...
随机推荐
- 意想不到的JavaScript(每日一题3)
题目: 答案: 1 4 3 2 解析:
- https原理以及golang基本实现
关于https 背景知识 密码学的一些基本知识 大致上分为两类,基于key的加密算法与不基于key的加密算法.现在的算法基本都是基于key的,key就以一串随机数数,更换了key之后,算法还可以继续使 ...
- vue --》elementUI 中 el-table组件 如何实现点击列,让该列高亮显示 ?
在elmentui官网中,只给了让当前行高亮显示的方法,但是如何让当前列高亮显示呢? <template> <div> <el-table :data="tab ...
- break和continue关键字的使用
一,break和continue关键字的使用 public class BreakContinueTest { public static void main(String args[]) { for ...
- springcloud用法
springcloud用法 使用springcloud搭建微服务肯定要在父工程下面编写子工程 一.搭建eureka注册中心 1. 创建maven项目(在springboot项目下建立子工程eur ...
- Who will be punished
Who will be punished Problem Description This time,suddenly,teacher Li wants to find out who have mi ...
- POJ 2492 A Bug's Life 题解
题面 这道题是一道标准的种类并查集: 种类并查集是给每个结点一个权值.然后在合并和查找的时候根据情况对权值来进行维护. 通过将原有的区间范围变大使并查集可以维护种类的联系: #include < ...
- Forsaken给学生分组
链接:https://ac.nowcoder.com/acm/contest/1221/C来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言5242 ...
- linux源码下载
概要:本文主要介绍ubuntu环境下,内核源码和命令源码的获取方式. 内核源码: 1.最简洁的方式,使用命令:apt-get source linux-$(uname -r).但配置的源服务器中不一定 ...
- Doker GRPC "Connection reset by peer"
https://success.docker.com/article/ipvs-connection-timeout-issue https://forums.docker.com/t/setting ...