Element Form如何验证input的value必须为数值类型？

最新推荐文章于 2024-02-07 18:10:38 发布
最新推荐文章于 2024-02-07 18:10:38 发布
阅读量7.3k 收藏 1
点赞数 1
分类专栏： element ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c2311156c/article/details/81508341
版权

input框中输入的内容，如果没有特别指定，一般其类型为string，这样的话即使你输入的是数字，在校验的时候也会被转换为字符串，此时如果你的校验rule中定义了type="number"（用于验证必须为数值类型），这样式无法校验出来的，会一直提示你必须要输入数值类型的类似错误信息，
此时你需要做的是在校验之前，将input的value转换为数值类型，方法为：v-model.numberinput

例如：
<el-input v-model.number="testForm.age" class="inputCls" size="small"></el-input>

 

关于v-model其他的修饰符请移步：
http://www.mamicode.com/info-detail-1984496.html

Daniel丶云焕
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入分析JSON编码格式提交表单数据
12-04
以JSON编码格式提交表单数据是HTML5对WEB发展进化的又一大贡献，以前我们的HTML表单数据是通过key-value方式传输的服务器端，这种形式的传输对数据组织缺乏管理，形式十分原始。而新出现的JSON格式提交表单数据方法，将表单里的所有数据转化的具有一定规范的JSON格式，然后传输的服务器端。服务器端接收到的数据是直接可以使用的合格JSON代码。 　如何声明以JSON格式提交表单 　　大家应该对如何用表单上传一个文件的写法很熟悉，它需要在HTML中form标记上添加 enctype=”multipart/form-data” 声明，就是告诉浏览器要按上传文件模式发送表单数据。而JSON
JavaScript 将字符串转换成数值（整数or浮点数）
weixin_30279315的博客
08-26 604
JavaScript 将字符串转换成数值（整数or浮点数JavaScript 将字符串转换成数值（整数or浮点数）2007-04-16 11:13从input中取出的value字符串进行加减乘除操作时需要首先进行数值转换，比如： var height = 20;var addvalue = document.formname.addheight.value;var newheigh...
【element-ui】输入框组件el-input输入数字/输出Number类型：type=“number“、v-model.number用法
shawxlee的CSDN博客
02-07 2002
输入框组件el-input输入数字/输出Number类型
element-UI input输入框 指定为数字
weixin_58246209的博客
01-13 1220
element-UI input数字输入框，异常现象解决办法
Vue el-input 之输入框自动转数字
蓝胖子的博客
06-02 893
Vue el-input 之输入框 String自动转数字
element el-input设置只能输入数字 而且限制最大值
slow097的博客
04-13 8117
// An highlighted block <el-input v-model="value" placeholder="请输入纯数字" type="number" @input="if(value > 120) value = 120; if(value < 0) value = 0;"></el-input> 在最小值会出现某种情况 但最小值为5, value值为5时, 无法回车去除5 这时候可以把@input 改写成 @blur 使用失焦来限制最大最.
Element el-input 表单输入数字校验
fengyiyangdeli的博客
05-07 5751
1、只能输入整数 <el-input v-model="value" placeholder="请输入整数" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"> </el-input> 2、两位小数 <el-input v-model="value" placeholder="请输入金额" onkeyup="value=value.replace(/^\D*(\d
vue+element 学习笔记 form表单验证之input数字必输（只能是数字）校验问题
热门推荐
changjiufu的博客
09-06 4万+
序言 在开发项目的过程中，表单需要设置某些字段输入的值必须是数字，且是必输字段，我使用了element提供的方法v-model.number，但是出现了一点问题。具体见图： 用了v-model.nuber以后： 看到了图以后很显然意见，他虽然完成了必输字段需要时数字这个需求，但是他还是可以输入文字。于是采用了另一种办法： 具体用法看代码： &lt;el-input v-mode...
Element 表单只能输入数字校验
web15085181368的博客
03-19 1715
Element 表单只能输入数字校验 以下验证均为只能输入数字类型 只能输入整数 只能输入小数—两位小数 开头不能为0，并且不能输入小数 只能输入数字或小数且第一位不能是0和点且只能有一个点 ...
element-ui校验表单只能输入数字
q879936814的博客
09-09 4923
接到需求，让表单中只能输入数字，使用v-model的.number可以实现，但是不能以0为开头；又试了rule加type=number校验，输入数组一直报输入的不是数字。最后使用了onkeyup方法。
input-knob:一个旋转的，触敏旋钮Web组件，您可以像使用
05-28
<input-knob> ⟳自定义元素可以像<input type="range">那样使用的旋转式触敏旋钮。安装dist目录包含可以直接使用的元素的CommonJS模块（ ... input-knob value =" 50 " scale =" 10 " min =" 0 " max ="
js Form.elements[i]的使用实例
12-04
代码如下: //检查表单元素是否为空 function check(Form) { for (i=0;i<Form.length;i++){ if(Form.elements[i].value == “”) { //Form的属性elements的首字e要小写 alert(Form.elements[i].name + “不能...
Vue+ElementUI实现表单动态渲染、可视化配置的方法
11-29
动态渲染就是有一个异步的数据，大概长这样：... "type": "input", "label": "姓名", "disable": false, "readonly": false, "value": "", "placeholder": "请输入姓名", "rules": [], "key": "name", "subtype
Angular封装表单控件及思想总结
12-13
前言 前端框架的强大无疑给开发者省去了不少烦恼，又因比较完善的UI库支撑，让部分后端开发者能够省去大量样式设计的时间成本，纵然如此，业务的多变性是...RROR Error: No value accessor for form control with name:
vue构建动态表单的方法示例
12-10
概述 后台管理系统里面有非常多的表单需求，我们希望能够通过写一个json格式的数据，通过...所以我们自己封装表单组件的时候也是可以传递一个value值，监听input事件获取输入的值。 <input type="text" v-model=
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告.docx
04-18
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告
网站界面设计mortal0418代码
04-18
网站界面设计mortal0418代码
PHP毕业设计-校园失物招领系统源码+数据库.zip
04-18
PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可
2024年神经酸行业分析报告.pptx
最新发布
04-18
2024年神经酸行业分析报告.pptx
element form自定义校验 无法获取value
06-07
element form自定义校验的时候，可以通过参数params获取当前校验的值。具体的实现方式可以参考以下代码示例： ```javascript Vue.component('custom-input', { template: ` <el-form-item label="Custom Input...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值