vue input 限制字节长度为50个字节(25个汉字,50个英文字符)

在input的change事件中调用此方法:

html:

方法1:直接使用

 <vs-input
    class="w-full"
    v-model="formData.goodsAlias"
    placeholder="请输入名称"
    @input="changeValue('goodsAlias')"  //调用方法
    @keyup.enter="changeValue('goodsAlias')" //回车键
  />

方法2:配合maxlength属性进行使用

 <vs-input
    class="w-full"
    v-model="formData.goodsAlias"
    maxlength="50" 	// 最大长度50个字符,不区分汉字/字母
    placeholder="请输入名称"
    @input="changeValue('goodsAlias')"
    @keyup.enter="changeValue('goodsAlias')" //回车键
  />
js:
      //校验字符:最多输入25个中文,或者50个英文
        changeValue(attr) {
            //console.log('attr',attr) //传入的属性
            let value = formData[attr]; //校验的字段
            // 中文、中文标点、全角字符按1长度,英文、英文符号、数字按0.5长度计算
            let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/;
            let maxLimitStr = 25; //25个汉字
            let pass = true;
            let substringStr = "";
            let length = 0;
            let strArr = value.split("");
            strArr.map((str) => {
                if (pass) {
                if (cnReg.test(str)) {
                    //中文
                    length++;
                } else {
                    //英文
                    length += 0.5;
                }
                //大于最大限制的时候
                if (length > maxLimitStr) {
                    pass = false;
                    this.$notifyError(
                    "文字长度已超出最大值,最大值为" + maxLimitStr * 2 + "个字符",
                    );
                    //将校验的字符截取返回
                    this.formData[attr] = substringStr;
                } else {
                    substringStr += str;
                }
                }
            });
            return pass;
        },
  • 3
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值