一、最簡(jiǎn)單，通過(guò)maxlength和onkeyup

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

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

二、通過(guò)@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) {

// 中文、中文標(biāo)點(diǎn)、全角字符按1長(zhǎng)度，英文、英文符號(hào)、數(shù)字按0.5長(zhǎng)度計(jì)算

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

}

}

三、通過(guò)watch

見代碼：

Examples

new Vue({

el: '#app',

data: {

number: '100',

items: {

text:'',

},

},

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

items:{

handler:function(){

var _this = this;

var _sum = 100; //字體限制為100個(gè)

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

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

},

deep:true

}

}

})

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。