zl程序教程

您现在的位置是:首页 >  其他

当前栏目

elementUI el-input 只能输入验证的操作方法效果demo(整理)

输入elementui 效果 整理 验证 Demo input el
2023-09-14 09:04:05 时间
只允许输入数字
<el-input type="number" placeholder="请输入" min="1" oninput ="value=value.replace(/[^\d]/g,'')"  v-model.number="count"></el-input>
只允许输入数字和小数
oninput ="value=value.replace(/[^0-9.]/g,'')"
允许输入小数点后几位:
// 保留一位小数
oninput="if(isNaN(value)) { value = parseFloat(value) } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}" 
// 若需要保留N位小数,则把2 改为 1 + n即可
设置范围,最大值,最小值,监听input 及 change事件
<el-input min="0" max="100" type="number" @input="numberChange($event, 100)" @change="numberChange($event, 100)" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8" v-model.number="count"></el-input> 
numberChange (val, max) {
  this.$nextTick(() => {
    this.count = Math.min(parseInt(val), max)
  })
}
1.正数,不能输入小数和小数点,只能输入 正整数,大于0的
<el-form-item label="安全库存:" prop="safeQty" class="meter_one" style="margin-top: 10px">
  <el-input
    v-model="form.safeQty"
    type="number"
    min="0"
    @input="form.safeQty=form.safeQty.replace(/^(0+)|[^\d]+/g,'')"
    placeholder="请输入安全库存"/>
</el-form-item>

2.小数点保留4位
 <el-form-item label="净重KG:" prop="netWeight" class="meter_one" style="margin-top: 10px">
  <el-input
    v-model="form.netWeight"
    type="number"
    placeholder="请输入净重KG"
    oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+5)}"
  />
</el-form-item>

感谢您的支持
在这里插入图片描述