溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了vue項目中如何實現限制el-input輸入，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
通過@keyup.native的時間動態監控輸入的類型
1.手機號碼,只能是數字,如果輸入了非數字直接清空
2.身份證號碼,除了Xx和數字其余的一律清空
3.基于1.2兩種情況下,還有一種是動態創建的字段(也就是v-for出來的),解決方法:先使用split形成字段數組,使用for循環找到最后一個點的前面的字段,方便使用$set更新和渲染頁面
setDelMsicStr(field,type){
let props
let len
let value
let newphoestr
let item = this
if (field) {
props = field.split('.')
len = props.length
for (let i = 0; i < len - 1; i++) {
item = item[props[i]]
}
if(type=="phone"){
newphoestr = (item[props[len - 1]]).replace(/([^0-9])+/g, '')
}else if(type=='idCard'){
newphoestr = (item[props[len - 1]]).replace(/([^0-9Xx])+/g, '')
}
this.$set(item, props[len - 1], newphoestr)
}
},重點:也是使用this.$set()時必須的點
for (let i = 0; i < len - 1; i++) {
item = item[props[i]]
}表格限制輸入的數字長度,超過限定值,直接顯示9999
<el-form-item prop="activStoreSellPrice">
<el-input type="number" @keyup.native="setRange('form.prdctStoreList.'+scope.$index+'.activStoreSellPrice',99999,0)" v-model.number="scope.row.activStoreSellPrice" :disabled="disabled" min="0" max="99999999"></el-input>
</el-form-item>重點：
表格的需要獲取到行的index(scope.$index)
@keyup.native="setRange('form.prdctStoreList.'+scope.$index+'.activStoreSellPrice',99999,0)"
補充知識：elementUI + vue 輸入框只能輸入正整數 不能輸入字母 e 以及+ - 號
看代碼吧~
<el-input :inline="true" v-model="dialogForm.closeTime" onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" type="number"></el-input>
上述內容就是vue項目中如何實現限制el-input輸入，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
