elementUI el-input 只能输入正整数验证的操作方法

 更新时间:2022年11月15日 09:45:37   作者:夜已如歌_ok  
这篇文章主要介绍了elementUI el-input 只能输入正整数验证,本文给大家详细讲解对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

字母e在js中属于数字,但是正则匹配 \d 是拦不住字母e 的

正确写法为:

onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
<el-input type="number" placeholder="请输入" min="1" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8" v-model.number="count"></el-input>

其他写法: 

// 只允许输入数字

<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)
      })
    }

<el-input >正数校验 小数校验

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>

到此这篇关于elementUI el-input 只能输入正整数验证的文章就介绍到这了,更多相关elementUI el-input输入验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3项目中预览并打印PDF的两种方法

    Vue3项目中预览并打印PDF的两种方法

    最近在项目开发中碰到一个需求是在页面中展示pdf预览功能,下面这篇文章主要给大家介绍了关于Vue3项目中预览并打印PDF的两种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • Vue实现监听某个元素滚动,亲测有效

    Vue实现监听某个元素滚动,亲测有效

    这篇文章主要介绍了Vue实现监听某个元素滚动,亲测有效!具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue 实现axios拦截、页面跳转和token 验证

    vue 实现axios拦截、页面跳转和token 验证

    这篇文章主要介绍了vue 实现axios拦截、页面跳转和token 验证,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue.js根据图片url进行图片下载

    vue.js根据图片url进行图片下载

    最近在做一个前端vue.js对接的功能模块时,需要实现一个下载图片的功能,本文就介绍了vue.js根据图片url进行图片下载,感兴趣的可以了解一下
    2021-06-06
  • Vue 前端路由工作原理hash与history的区别

    Vue 前端路由工作原理hash与history的区别

    这篇文章主要介绍了Vue 前端路由工作原理hash与history的区别,文章围绕主题展开vue-router的工作原理的简单介绍,感兴趣的朋友可以学习一下
    2022-07-07
  • vue中mint-ui的使用方法

    vue中mint-ui的使用方法

    这篇文章主要为大家详细介绍了vue中mint-ui的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04
  • 一个手写的vue放大镜效果

    一个手写的vue放大镜效果

    这篇文章主要介绍了一个手写的vue放大镜,组件使用less,文中给出了示例代码,需要的朋友可以参考下
    2019-08-08
  • Elementui如何限制el-input框输入小数点

    Elementui如何限制el-input框输入小数点

    这篇文章主要介绍了Elementui如何限制el-input框输入小数点,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • VUE使用echarts 5.0以上版本渲染器未导入错误问题

    VUE使用echarts 5.0以上版本渲染器未导入错误问题

    这篇文章主要介绍了VUE使用echarts 5.0以上版本渲染器未导入错误问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • VUE中V-IF条件判断改变元素的样式操作

    VUE中V-IF条件判断改变元素的样式操作

    这篇文章主要介绍了VUE中V-IF条件判断改变元素的样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随想过来看看吧
    2020-08-08

最新评论