iview的input框校验添加v-modal.number会影响校验,还是依照API使用number来转换number类型
公司项目使用了iview2.0版本的,有一个需求是需要把里面的值换成number类型并且校验,代码大致如下,使用了v-modal.number来实现转换,
<FormItem label="学号" prop="name">
<Input v-model.number=" Student.Sno" placeholder="Enter name"></Input>
</FormItem>
校验的代码如下是,其中Regular.rule是校验的正则,
Sno:[ { type:'number', trigger: 'blur', message:'公估费(含税)必填'}, {required: true, pattern: Regular.rule, trigger: 'blur', message:'公估费(含税)必填'}, ]
后来发现校验并不完全符合理想,之火查API看到Input组件有一个属性number可以转换,依照改成下面这样子就可以了
<FormItem label="学号" prop="name">
<Input v-model=" Student.Sno" placeholder="Enter name" number></Input>
</FormItem>
iview的input框校验添加v-modal.number会影响校验,还是依照API使用number来转换number类型的更多相关文章
- el-mement表单校验-校验失败时自动聚焦到失败的input框
思路:调用input的focus()事件,聚焦到失败的input框上, 问题:如何获取失败的input框,结合element的校验方法,查看可以提供入口的地方 调用this.$refs[formNam ...
- element 表单校验失败自动聚焦到失败的input框
1.在对应的input框上添加ref属性,直接根据ref就可精确地获取到元素 <el-form-item label="课程名称" :label-width="fo ...
- 关于键盘事件-查询:有多个input框,任意一个支持enter键查询
应用场景:同一个界面有多个input框支持任意一个Enter查询. 实现:在input框中添加onkeypress="函数名()". 函数里面编写对应键盘code值,在里面直接调用 ...
- 给“file”类型的input框赋值的问题
开发"新闻编辑"功能时,会遇到给"file"类型的input框赋值的问题,用来展示之前上传的文件,但由于file类型的input框受到安全限制,所以不能被赋值, ...
- element ui input框不能输入的问题(实时学习)
解决: 在input的上面添加数据v-model 既可以 1.菜单中api (2018年8月14号) :default-active 默认根据当前路由选中菜单,值需要和 el-submenu 的属 ...
- h5 页面点击添加添加input框
h5 页面点击添加添加input框 前段时间有个需求,页面要能点击添加按钮控制input框的个数,当时感觉有点难,就没做,这两个又遇到了,没办法写了个简单的 效果图,加号增加,减号减少 直接上代码, ...
- 使用iview如何使左上的添加按钮和右上的搜索框和边框对齐
使用iview如何使左上的添加按钮和右上的搜索框和边框对齐呢? 效果如下: 使用iview自带的Grid 栅格进行布局,但是由于按钮和搜索框的大小不正好是一个栅格的宽度,所以不是很好跳转,且栅格也不支 ...
- 让单选input框,不在被选中,添加disabled即可。输入框input的一些技巧
1.让单选input框,不在被选中,添加disabled即可 2.input的file文件对象的清空,只需要input.val("");就可以了.
- 函数式组件中实现Antd打开Modal后其Input框自动聚焦(focus)到文字的最后
目前React使用函数式组件已经成为趋势, 如何把React函数式组件用好, 提高性能, 从而实现业务需求也成为了一种能力的体现......咳咳咳, 进入正题: 现实场景需求 我想实现这一个需求, 父 ...
随机推荐
- leetcode第32题:最长有效括号
关于括号匹配或生成的问题,首先想到的是栈. 本题易错点:返回值为连续有效()的长度, 即()(()这种情况下,返回值为2 # 去除字符串首的连续)和字符串尾得连续( while True: if no ...
- SQL update 关联更改,内部需要引用表名
select A.Id,A.Email,( select C.Email from [nopCommerce].[dbo].[Customer] C left join [nopCommerce].[ ...
- xampp安装后启动apache出现端口占用问题
apache默认监听电脑80端口,当端口被占用时,xampp无法正常启动apache.我们需要将端口解除占用再启动. xampp报错: Problem detected!19:36:24 [Apach ...
- springboot 多数据源之错误 HikariPool-1 - jdbcUrl is required with driverClassName.
数据源连接报错: 之前在1.5.7的版本的时候用该数据源配置没问题,看如下所示 springboot1.5.7配置多数据源: datasource.master.url=jdbc:mysql://lo ...
- ES查询实例
注:转载自https://www.cnblogs.com/yjf512/p/4897294.html 作者:叶剑锋 elasticsearch 查询(match和term) es中的查询请求有两种方式 ...
- 网购分期不还 N种恶果等着你
N种恶果等着你" title="网购分期不还 N种恶果等着你"> 网购市场狂飙突进的发展,让每个人都享受到随时随地购物的乐趣,也在很大程度上推动商品之间的流通.目前 ...
- Windows 下 LaTeX 手动安装宏包(package)以及生成帮助文档的整套流程
本文简单介绍如何手动安装一个 LaTeX 宏包. 一般来说,下载的 TeX 发行版已经自带了很多宏包,可以满足绝大部分需求,但是偶尔我 们也可能碰到需要使用的宏包碰巧没有安装的情况,这时我们就需要自己 ...
- MAC使用nginx分发80至8080端口
由于项目必须要启动80端口,但是mac系统中非root用户无法直接使用1024以下的端口 2.释放apache的80端口 由于Mac OS是自带Apache服务的,它本身占用了80端口,首先你需要将A ...
- 从VR泛滥到倒闭看热门投机的山寨创业心态
相对国外来说,国人的从众心理非常严重.无数的段子和"名人名言"都在反复向我们传递出一个信息:国人在做事的时候,总是随大流,趋向热点.而从行业角度来看,结果就会造成行业中良莠不齐.鱼 ...
- python基础-基本概念
python概念介绍 python是一门动态解释型的强类型定义语言,创始人吉多·范罗苏姆(Guido van Rossum) #编译型语言 编译型:一次性将所有程序编译成二进制文件 缺点:开发效率低, ...