1、前端页面

  1. <el-row :gutter="20">
  2. <el-col :span="20">
  3. <el-form-item label="数量" prop="quantity">
  4. <el-input
  5. class="entity"
  6. placeholder="请输入数量"
  7. v-model="ruleForm.quantity"
  8. size="mini"
  9. clearable>
  10. <span slot="suffix" style="padding: 0 5px"></span>
  11. </el-input>
  12. </el-form-item>
  13. </el-col>
  14. </el-row>

2、规则验证

  1. export default {
  2. data() {
  3. return {
  4. ruleForm: {
  5. quantity: "",
  6. },
  7. rules: {
  8. quantity: [{
  9. pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
  10. required: true,
  11. message: '请输入数量,且为正整数类型',
  12. trigger: 'blur'
  13. }, ],
  14. },
  15. };
  16. },

若本文有帮助到阅读本文的同学,欢迎点赞、关注、收藏,互相学习交流。

el-input 限制只能输入正整数的更多相关文章

  1. input输入框只能输入正整数正则

    input输入框加入限制只能输入正整数,输入其他字符会自动清除: <input type="text" value="1" onkeyup="i ...

  2. input输入框只能输入正整数、字母、小数、汉字

    只需将需要的代码加入到input输入框中,即可使用! 1,文本框只能输入数字代码(小数点也不能输入) 代码如下: <input onkeyup="this.value=this.val ...

  3. input输入框只能输入正整数

    <input type="text" value="1" onkeyup="if(this.value.length==1){this.valu ...

  4. input el-input 只能输入正整数验证

    字母e在js中属于数字,所以一般的正则匹配 \d 是拦不住字母e 的 正确写法为: onKeypress="return (/[\d]/.test(String.fromCharCode(e ...

  5. input输入框限制输入正整数、小数、字母、文字

    有的时候需要限制input的输入格式: 例如,输入大于0的正整数 <input onkeyup="if(this.value.length==1){this.value=this.va ...

  6. input框限制只能输入正整数、字母、小数、

    这篇博文大部分来自于网上,为了方便自己查阅,以及帮助他人.   1,只能输入正整数 <input onkeyup="if(this.value.length==1){this.valu ...

  7. 有趣的 验证JS只能输入正整数

    <html> <head> <title>只能输入正整数</title> </head> <body> 兑换数量:<inp ...

  8. 控制input中只能输入固定格式内容

    onkeyup 事件会在键盘按键被松开时发生,onafterpaste 是粘贴触发,没有这个事件用onblur吧,失去焦点时发生输入完,点其他地方就会执行. <html lang="e ...

  9. input输入框只能输入正数和小数(保留小数点后两位)

    1.限制只能输入正数和小数保留小数点后两位 1 <input type="number" id="txtNum" /> 2 3 <script ...

  10. html input验证只能输入数字,不能输入其他

    html input验证只能输入数字,不能输入其他 此方法为借鉴别人的,在此只做记录. <input type="text" onkeyup="if(!/^\d+$ ...

随机推荐

  1. 关于Intent.setDataAndType参数问题

    关于Intent.setDataAndType参数问题 install取设置属于和类型,数据就是获取到的uri,更具文件类型不同,type参数也不相同,具体参考下表 {后缀名,MIME类型} ​ {& ...

  2. 记一次 .NET 某自动化集采软件 崩溃分析

    一:背景 1.讲故事 前段时间有位朋友找到我,说他的程序在客户的机器上跑着跑着会出现偶发卡死,然后就崩掉了,但在本地怎么也没复现,dump也抓到了,让我帮忙看下到底怎么回事,其实崩溃类的dump也有简 ...

  3. SpringCloud -Netflix 总结·

    springcloud 核心组件 Spring Cloud是一系列框架的有序集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册.配置中心.智能路由.消息 ...

  4. npm 依赖下载报错:主机名/IP与证书的altname不匹配

    npm 依赖下载报错:主机名/IP与证书的altname不匹配: //取消ssl验证 npm set strict-ssl false npm config set registry http://r ...

  5. MySQL遇到的坑:sql_mode=only_full_group_by不兼容

    描述: 解决方案: show variables like "%sql_mode%"; SET sql_mode=(SELECT REPLACE(@@sql_mode," ...

  6. 【实时数仓】Day04-DWS层业务:DWS设计、访客宽表、商品主题宽表、流合并、地区主题表、FlinkSQL、关键词主题表、分词

    一.DWS层与DWM设计 1.思路 之前已经进行分流 但只需要一些指标进行实时计算,将这些指标以主题宽表的形式输出 2.需求 访客.商品.地区.关键词四层的需求(可视化大屏展示.多维分析) 3.DWS ...

  7. maven 项目依赖自动导入失败(pom.xml 文件爆红),解决--手动导入

    idea 报错信息提示:Dependency 'xxx' not found 解决方法:可以通过更换仓库的镜像配置解决,但是一般咱都在配置maven的时候,设置成阿里云仓库镜像了,更换成其他的,可能出 ...

  8. vue 强制刷新数据 this.$forceUpdate()

    vue项目中,修改了数据可能已经渲染的地方不会发生变化,所以加上 this.$forceUpdate()可以强制刷新数据

  9. element-ui中table表格表头和表格内容都水平居中,以及斑马纹背景颜色修改

    <el-table :data="detalData" stripe //斑马纹 border :header-cell-style="{textAlign: 'c ...

  10. 学习ASP.NET Core Blazor编程系列十九——文件上传(下)

    学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...