vue数值型输入框限制长度

时间:2022-06-05 乐之终曲人气:0

vue数值型输入框并限制长度

描述

原有的 <el-input type="number" /> 个人觉得存在问题，maxlength 属性无法生效，其次 max 属性虽然能够限制，但是无法阻止用户手动输入，因此依然存在 bug

代码

改为正则表达式方式

<el-input v-model="form.level" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" maxlength="10" 
show-word-limit clearable />

vue输入框限制各种输入格式

1.限制只能输入数字、带小数点的数字

<el-input v-model="form.userName" @input="onInput('keyName', $event)"></el-input>

// 限制只能输入数字、带小数点的数字、小数点保留5位，想要小数点后保留多少位，可将{0,5}中的5改为对应的位数，例如保留1位：{0,1}
onInput(key, event){
   this.form[key] = event.match(/^\d*(\.?\d{0,5})/g)[0]
}

2.限制输入的只能为11位手机号

<el-input v-model="form.phone" maxlength="11" @input="onInput('keyName', $event)"></el-input>

// 首先限制它只能输入整数，最大长度为maxlength="11"，其次是当它输入长度达到11位时进行校验
onInput(key, event){
   this.form[key] = event.replace(/[^\d]/g,'')
   if(event.length >= 11) {
       const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
       if(!reg.test(event)) {
            console.log('您输入的手机号不正确')
       }
   }
}

3.电子邮箱正则

/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

4.SFZ正则

// SFZ普通的校验
/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/

// 18位SFZ精准校验
 /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

加载全部内容