el-input 限制 只能输入数字,数字大小,长度,小数点后位数以及字母e的限制
el-input 限制 只能输入数字,数字大小,长度,小数点后位数以及字母e的限制通常情况下在使用elementUI前端框架的时候,经常会遇到表单要限制输入内容,尤其是数字。通常情况下在使用elementUI前端框架的时候,经常会遇到表单要限制输入内容,尤其是数字。话不多说,代码如下:<el-inputv-model="form.plan"type="number"step="0.5"min
el-input 限制 只能输入数字,数字大小,长度,小数点后位数以及字母e的限制
通常情况下在使用elementUI前端框架的时候,经常会遇到表单要限制输入内容,尤其是数字。
话不多说,代码如下:
<el-input
v-model="form.plan"
type="number"
step="0.5"
min="0" max="5"
@keyup.native="proving($event)"
@input="editInput($event,'plan')"
placeholder="最高5分"
oninput="if(value>5)value=5;if(value<0)value=0"
></el-input>
第一个属性:type=“number” input的原生属性,标明input框的类型
第二个属性: step=“0.5” input的原生属性,type=“number” 时生效, 标明输入字段的合法数字间隔(假如 step=“0.5”,则合法数字应该是 -0.5、0、0.5、1,以此类推)
第三个属性: min=“0” max=“5” min 属性规定输入字段所允许的最小值。 max 属性规定输入字段所允许的最大值。 min 属性与 max 属性配合使用,可创建合法值范围。
第四个属性:@keyup.native="proving($event)"
proving(e){
var val=e.target.value;
//限制只能输入一个小数点
if (val.indexOf(".") != -1) {
var str = val.substr(val.indexOf(".") + 1);
if (str.indexOf(".") != -1) {
val = val.substr(0, val.indexOf(".") + str.indexOf(".") + 1);
}
}
e.target.value = val.replace(/[^\d^\.]+/g,'');
},
第五个属性:@input="editInput($event,‘plan’)"
editInput(value, name) {
this.form[name] =
("" + value) // 第一步:转成字符串
.replace(/[^\d^\.]+/g, "") // 第二步:把不是数字,不是小数点的过滤掉
.replace(/^0+(\d)/, "$1") // 第三步:第一位0开头,0后面为数字,则过滤掉,取后面的数字
.replace(/^\./, "0.") // 第四步:如果输入的第一位为小数点,则替换成 0. 实现自动补全
.match(/^\d*(\.?\d{0,1})/g)[0] || ""; // 第五步:最终匹配得到结果 以数字开头,只有一个小数点,而且小数点后面只能有0到2位小数
},
第六个属性: placeholder=“最高5分” 提示内容
第七个属性:οninput="if(value>5)value=5;if(value<0)value=0"
表示:如果输入内容大于5 ,就输出5 ,如果输入内容小于0 输出0
elementUI中el-input输入数字且保留指定小数位
<!-- 如果需要保留两位小数或者三位小数 只需要将 最后的 +2 改为 +3 即可 以此类推,保留几位小数就 几+1 -->
<el-input type="text"
placeholder="请输入保留一位小数的数字"
v-model="userValue"
oninput="if(isNaN(value)) { value = parseFloat(value) } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}" />
因项目需要在此记录下
此文章是我开发过程的一个记录,方便我日后学习和复盘。若能帮到你不胜荣幸。
更多推荐
所有评论(0)