一、最簡單，通過maxlength和onkeyup

?:;'\\\$\%\^\&\*\(\)\-\|\[\]\{\}\{\}]/g,'');" />

代碼中正則是限制除中文外的所有鍵盤字符。

二、通過@input和@change

見代碼：

changeValue () {

let leng = this.validateTextLength(this.groupName)

if (leng >= 15) {

this.$refs.groupName.maxLength = leng

} else {

this.$refs.groupName.maxLength = 30

}

},

validateTextLength (value) {

// 中文、中文標點、全角字符按1長度，英文、英文符號、數字按0.5長度計算

let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/g

let mat = value.match(cnReg)

let length

if (mat) {

length = (mat.length + (value.length - mat.length) * 0.5)

return length

} else {

return value.length * 0.5

}

}

三、通過watch

見代碼：

Examples

new Vue({

el: '#app',

data: {

number: '100',

items: {

text:'',

},

},

watch:{ //watch()監聽某個值(雙向綁定)的變化，從而達到change事件監聽的效果

items:{

handler:function(){

var _this = this;

var _sum = 100; //字體限制為100個

_this.$refs.count.setAttribute("maxlength",_sum);

_this.number= _sum- _this.$refs.count.value.length;

},

deep:true

}

}

})

總結

以上是生活随笔為你收集整理的vue设置输入框输入长度_vue输入框限制字符串长度和输入内容实时验证的实现方式...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。