el-input 限制只能输入正整数
1、前端页面
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="数量" prop="quantity">
<el-input
class="entity"
placeholder="请输入数量"
v-model="ruleForm.quantity"
size="mini"
clearable>
<span slot="suffix" style="padding: 0 5px">个</span>
</el-input>
</el-form-item>
</el-col>
</el-row>
2、规则验证
export default {
data() {
return {
ruleForm: {
quantity: "",
},
rules: {
quantity: [{
pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
required: true,
message: '请输入数量,且为正整数类型',
trigger: 'blur'
}, ],
},
};
},
若本文有帮助到阅读本文的同学,欢迎点赞、关注、收藏,互相学习交流。
el-input 限制只能输入正整数的更多相关文章
- input输入框只能输入正整数正则
input输入框加入限制只能输入正整数,输入其他字符会自动清除: <input type="text" value="1" onkeyup="i ...
- input输入框只能输入正整数、字母、小数、汉字
只需将需要的代码加入到input输入框中,即可使用! 1,文本框只能输入数字代码(小数点也不能输入) 代码如下: <input onkeyup="this.value=this.val ...
- input输入框只能输入正整数
<input type="text" value="1" onkeyup="if(this.value.length==1){this.valu ...
- input el-input 只能输入正整数验证
字母e在js中属于数字,所以一般的正则匹配 \d 是拦不住字母e 的 正确写法为: onKeypress="return (/[\d]/.test(String.fromCharCode(e ...
- input输入框限制输入正整数、小数、字母、文字
有的时候需要限制input的输入格式: 例如,输入大于0的正整数 <input onkeyup="if(this.value.length==1){this.value=this.va ...
- input框限制只能输入正整数、字母、小数、
这篇博文大部分来自于网上,为了方便自己查阅,以及帮助他人. 1,只能输入正整数 <input onkeyup="if(this.value.length==1){this.valu ...
- 有趣的 验证JS只能输入正整数
<html> <head> <title>只能输入正整数</title> </head> <body> 兑换数量:<inp ...
- 控制input中只能输入固定格式内容
onkeyup 事件会在键盘按键被松开时发生,onafterpaste 是粘贴触发,没有这个事件用onblur吧,失去焦点时发生输入完,点其他地方就会执行. <html lang="e ...
- input输入框只能输入正数和小数(保留小数点后两位)
1.限制只能输入正数和小数保留小数点后两位 1 <input type="number" id="txtNum" /> 2 3 <script ...
- html input验证只能输入数字,不能输入其他
html input验证只能输入数字,不能输入其他 此方法为借鉴别人的,在此只做记录. <input type="text" onkeyup="if(!/^\d+$ ...
随机推荐
- 关于Intent.setDataAndType参数问题
关于Intent.setDataAndType参数问题 install取设置属于和类型,数据就是获取到的uri,更具文件类型不同,type参数也不相同,具体参考下表 {后缀名,MIME类型} {& ...
- 记一次 .NET 某自动化集采软件 崩溃分析
一:背景 1.讲故事 前段时间有位朋友找到我,说他的程序在客户的机器上跑着跑着会出现偶发卡死,然后就崩掉了,但在本地怎么也没复现,dump也抓到了,让我帮忙看下到底怎么回事,其实崩溃类的dump也有简 ...
- SpringCloud -Netflix 总结·
springcloud 核心组件 Spring Cloud是一系列框架的有序集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册.配置中心.智能路由.消息 ...
- npm 依赖下载报错:主机名/IP与证书的altname不匹配
npm 依赖下载报错:主机名/IP与证书的altname不匹配: //取消ssl验证 npm set strict-ssl false npm config set registry http://r ...
- MySQL遇到的坑:sql_mode=only_full_group_by不兼容
描述: 解决方案: show variables like "%sql_mode%"; SET sql_mode=(SELECT REPLACE(@@sql_mode," ...
- 【实时数仓】Day04-DWS层业务:DWS设计、访客宽表、商品主题宽表、流合并、地区主题表、FlinkSQL、关键词主题表、分词
一.DWS层与DWM设计 1.思路 之前已经进行分流 但只需要一些指标进行实时计算,将这些指标以主题宽表的形式输出 2.需求 访客.商品.地区.关键词四层的需求(可视化大屏展示.多维分析) 3.DWS ...
- maven 项目依赖自动导入失败(pom.xml 文件爆红),解决--手动导入
idea 报错信息提示:Dependency 'xxx' not found 解决方法:可以通过更换仓库的镜像配置解决,但是一般咱都在配置maven的时候,设置成阿里云仓库镜像了,更换成其他的,可能出 ...
- vue 强制刷新数据 this.$forceUpdate()
vue项目中,修改了数据可能已经渲染的地方不会发生变化,所以加上 this.$forceUpdate()可以强制刷新数据
- element-ui中table表格表头和表格内容都水平居中,以及斑马纹背景颜色修改
<el-table :data="detalData" stripe //斑马纹 border :header-cell-style="{textAlign: 'c ...
- 学习ASP.NET Core Blazor编程系列十九——文件上传(下)
学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...