js限制input输入文本2个字符英文1个字符

js限制input输入文本2个字符英文1个字符

<input type="text" v-model="comodMark" @input="changeValue" />
changeValue (el) {
      let value = el.target.value
      // 最长4个字符 (需求限制4个字符)
      if (value.length > 4) {
        value = value.substring(0, 4)
      }
      let enLength = 0
      let cnLength = 0 // 中文个数
      let len = value.length
      let charCode = -1
      let valArr = value.split('')
      // 中文、中文标点、全角字符按1长度,英文、英文符号、数字按0.5长度计算
      let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/
      // 正则这个地方有个小坑, 如果带着g全局匹配 会出现一次true 一次false的问题,原因下面我放链接
      let valLen = valArr.length
      // 判断记录是中文还是非中文
      // for (var i = 0; i < len; i++) {
      //   charCode = value.charCodeAt(i)
      //   if (charCode >= 0 && charCode <= 128) {
      //     enLength += 1
      //   } else {
      //     cnLength += 2
      //   }
      // }
      // 用正则性能要好一点
      for (var i = 0; i < len; i++) {
        if (!cnReg.test(value[i])) {
          enLength += 1
        } else {
          cnLength += 2
        }
      }
      // 两个中文
      if (cnLength >= 4) {
        // 前2个都是中文
        if (valLen >= 3) {
          if (cnReg.test(valArr[0]) && cnReg.test(valArr[1]) && !cnReg.test(valArr[2])) {
            // console.log('前两个都是中文1111111111111', value, '截取0-2')
            this.comodMark = value.substring(0, 2)
            // 前三个都是中文
          } else if (cnReg.test(valArr[0]) && cnReg.test(valArr[1]) && cnReg.test(valArr[2])) {
            // console.log('前三个都是中文2222222222222', value, '截取0-2')
            this.comodMark = value.substring(0, 2)
            // 前1个中文 两个英文
          } else if (cnReg.test(valArr[0]) && !cnReg.test(valArr[1]) && !cnReg.test(valArr[2])) {
            // console.log('前1个中文 两个英文', value, '截取0-3')
            this.comodMark = value.substring(0, 3)
            // 前两个英文
          } else if (!cnReg.test(valArr[0]) && !cnReg.test(valArr[1]) && cnReg.test(valArr[2])) {
            // console.log('前两个英文3333333333333333', value, '截取0-3')
            this.comodMark = value.substring(0, 3)
          } else {
            // console.log('else')
            this.comodMark = value.substring(0, 2)
          }
        } else {
          this.comodMark = value.substring(0, 2)
        }
        // 1个中文 两个英文
      } else if (cnLength === 2 && enLength >= 2) {
        // console.log('1个中文 两个英文')
        this.comodMark = value.substring(0, 3)
        // 无中文
      } else if (cnLength === 0) {
        // console.log('无中文')
        this.comodMark = value.substring(0, 4)
      }
    },

javascript 使用正则test( )第一次是 true,第二次是false

参考: 判读字符长度

适用我这种仅输入几个限制的,如果多的话感觉不适用.也没找到更合适的方法,所以直接截取长度个数
如果有好的方法欢迎留言,不吝赐教!!
当然更希望路过的大神, 提些建议, 如何优化,灵活些,给些思路也可~

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值