input框只输入数字和保留小数校验

1.只支持输入数字的校验
//  方法一:使用type=“number”   缺点:maxlength不生效
<el-input v-model.number='count' type='number' maxlength='9'/>

//  法二:使用[正则表达式  oninput="value=value.replace(/[^\d]/g,'')"
<el-input v-model.number='count' oninput="value=value.replace(/[^\d]/g,'')" maxlength='9'/>


2.输入数字且只保留两位小数的表单校验
//  方法一:不使用表单校验
//  缺点:不能输入0.01
<el-input oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 3):value" type="number" v-model.number="num"></el-input>
//解决:把v-model的number去掉即可
<el-input oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 3):value" type="number" v-model="num"></el-input>
//原因:v-model.number会把0.0x后的数字转换为0,算是输入框的一个特性吧。

//  方法二:使用表单校验
cost:[
 { required: true, trigger: 'change', message:'请输入金额'},
 { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确的格式,可保留两位小数' }
],
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容