vue el-input纯数字校验 只能输入数字
自我记录
踩坑 1和2 都不是很完美
3和4原理就是使用正则输入的时候替换成空字符oninput="value=value.replace(/\D/g,'')"
5就是表单校验但只是提示用户
1.通过设置type属性：type="number"，会有样式问题(通过css也能干掉) 不建议使用
<el-input type="number" v-model="form.value"/>
2.通过绑定值限制的方式：v-model.number="form.value" e 和 . 都可以输入一次 不建议使用
<el-input type="number" v-model="form.value"/>
3.写完传给后端的值是字符串
<el-input v-model="form.value" oninput="value=value.replace(/\D/g,'')" placeholder="请输入内容纯数字"/>
4.写完01就变成1了 js Number 机制
<el-input v-model.number="form.value" oninput="value=value.replace(/\D/g,'')" placeholder="请输入内容纯数字"/>
5.表单校验提示
<el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
<el-form-item
label="年龄"
prop="value"
:rules="[
{ required: true, message: '年龄不能为空'},
{ type: 'number', message: '年龄必须为数字值'}
]"
>
<el-input v-model.number="form.value" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">提交</el-button>
</el-form-item>
</el-form>
data() {
return {
form: {
value:''
}
}
},
methods:{
submitForm(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.form.value)
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
看实际需求我公司项目用的是 第四种去零文章来源：https://www.toymoban.com/news/detail-700303.html
如有转载 请备注原文地址!文章来源地址https://www.toymoban.com/news/detail-700303.html
到了这里，关于vue el-input纯数字校验的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
