The el-input input box controls the input byte length

Requirement: Input is not allowed after exceeding a certain byte

<el-input @input=“changeFn” v-model=“testData” >

method one,

changeFn(value){
    
    
 let len = 0, j = 0; //len为字节数,j为字符数
      for (var i = 0; i < value.length; i++) {
    
    
        //charCodeAt(i)返回value第i个的UNcode值
        if (value.charCodeAt(i) > 127 || value.charCodeAt(i) == 94) {
    
    
          len += 2;
          j++;
        } else {
    
    
          len++;
          j++;
        }
        if (len > 4) {
    
    
          this.$message("笼架起始最多只能输入四个字节");
          this.testData = value.substring(0, j - 1);
          break;
        }
},

Method 2
Use the rule verification, if the verification is not passed, the submission is not allowed

rule:{
    
    
	testData:[{
    
    validator: checkLength,trigger:'blur'}]
}

insert image description here
Method 3,
write global instructions

<el-input  v-limitTextLen='15'   v-model="testData" ></el-input> // 这里15表示限制长度

insert image description here

Guess you like

Origin blog.csdn.net/weixin_43979503/article/details/127542939