vue input 限制字节长度为50个字节（25个汉字，50个英文字符）

最新推荐文章于 2024-04-16 16:00:38 发布

原创最新推荐文章于 2024-04-16 16:00:38 发布 · 1.1w 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

JS 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种在Vue项目中对输入框输入字符进行限制的方法，包括直接限制和结合maxlength属性使用，确保用户输入符合特定的长度标准。

部署运行你感兴趣的模型镜像

在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;
        },