element-ui中el-input限制输入两位小数

1,268 阅读1分钟

需求:只能输入一个包含最多两位小数的数字,最小为0,最大为1

解决代码:

v-model.number="form.xxx"            
placeholder=""            
max="100"            
min="0"            
@input="editInput($event, form, 'xxx')"            
oninput="if(value>100){value=100};if(value<0)value=0"

editInput($event, row, key) {      
    console.log($event); //      
    row[key] = ('' + $event)        
        .replace(/[^\d.]/g, '') //将非数字和点以外的字符替换成空        
        .replace(/^\./g, '') //验证第一个字符是数字而不是点        
        .replace(/\.{2,}/g, '.') //出现多个点时只保留第一个        
        .replace('.', '$#$') // 1、将数字的点替换成复杂字符$#$        
        .replace(/\./g, '') // 2、将字符串的点直接清掉        
        .replace('$#$', '.') // 3、将复杂字符再转换回点        
        .replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数      
    if (row[key].indexOf('.') < 0 && row[key] != '') {       
         row[key] = parseFloat(row[key]);      
    } else if (row[key].indexOf('.') > 1 && row[key][0] === '0') {        
        row[key] = parseFloat(row[key]);      
    }    
},

总结:

尽量用el-input封装好的,刚开始我用的@input.native会出现可输入e的情况,并且event是一个对象,用@input传入的event是一个对象,用@input传入的event就是一个值,看了源码后发现了input的新的api compositionstart/onCompositionEnd/compositionupdate,在输入法输入中文的时候会触发这三个函数,在input函数之前触发