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