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

前往低代码交流专区

更多推荐