vue: Type operation that restricts input when el input input
- 2021-08-06 19:49:30
- OfStack
Dynamically monitor the type of input through the time of @ keyup. native
1. The mobile phone number can only be a number. If a non-number is entered, it will be emptied directly
2. ID number, except Xx and number, the rest of the 1 law is emptied
3. Based on 1.2, there is also a dynamically created field (that is, v-for). The solution is to use split to form a field array first, and use for loop to find the field in front of the last point, which is convenient to update and render the page with $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)
}
},
Important: It is also a necessary point when using this. $set ()
for (let i = 0; i < len - 1; i++) {
item = item[props[i]]
}
The table limits the length of the number entered. If it exceeds the limit, 9999 will be displayed directly
<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>
Key points:
index (scope. $index) of the table needs to be fetched to the row
@keyup.native="setRange('form.prdctStoreList.'+scope.$index+'.activStoreSellPrice',99999,0)"
Additional knowledge: elementUI + vue input box can only input positive integers, not letters e and +-sign
Look at the code ~
< el-input :inline="true" v-model="dialogForm.closeTime" onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" type="number" > < /el-input >