公司项目使用了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类型的更多相关文章

  1. el-mement表单校验-校验失败时自动聚焦到失败的input框

    思路:调用input的focus()事件,聚焦到失败的input框上, 问题:如何获取失败的input框,结合element的校验方法,查看可以提供入口的地方 调用this.$refs[formNam ...

  2. element 表单校验失败自动聚焦到失败的input框

    1.在对应的input框上添加ref属性,直接根据ref就可精确地获取到元素 <el-form-item label="课程名称" :label-width="fo ...

  3. 关于键盘事件-查询:有多个input框,任意一个支持enter键查询

    应用场景:同一个界面有多个input框支持任意一个Enter查询. 实现:在input框中添加onkeypress="函数名()". 函数里面编写对应键盘code值,在里面直接调用 ...

  4. 给“file”类型的input框赋值的问题

    开发"新闻编辑"功能时,会遇到给"file"类型的input框赋值的问题,用来展示之前上传的文件,但由于file类型的input框受到安全限制,所以不能被赋值, ...

  5. element ui input框不能输入的问题(实时学习)

    解决: 在input的上面添加数据v-model 既可以 1.菜单中api (2018年8月14号) :default-active  默认根据当前路由选中菜单,值需要和  el-submenu 的属 ...

  6. h5 页面点击添加添加input框

    h5 页面点击添加添加input框 前段时间有个需求,页面要能点击添加按钮控制input框的个数,当时感觉有点难,就没做,这两个又遇到了,没办法写了个简单的 效果图,加号增加,减号减少 直接上代码, ...

  7. 使用iview如何使左上的添加按钮和右上的搜索框和边框对齐

    使用iview如何使左上的添加按钮和右上的搜索框和边框对齐呢? 效果如下: 使用iview自带的Grid 栅格进行布局,但是由于按钮和搜索框的大小不正好是一个栅格的宽度,所以不是很好跳转,且栅格也不支 ...

  8. 让单选input框,不在被选中,添加disabled即可。输入框input的一些技巧

    1.让单选input框,不在被选中,添加disabled即可 2.input的file文件对象的清空,只需要input.val("");就可以了.

  9. 函数式组件中实现Antd打开Modal后其Input框自动聚焦(focus)到文字的最后

    目前React使用函数式组件已经成为趋势, 如何把React函数式组件用好, 提高性能, 从而实现业务需求也成为了一种能力的体现......咳咳咳, 进入正题: 现实场景需求 我想实现这一个需求, 父 ...

随机推荐

  1. Windows10下Linux系统的安装和使用

    WSL 以往我都是直接安装VirtualBox,然后再下载Linux系统的ISO镜像,装到VirtualBox里运行. 改用Win10系统后,了解到了WSL(Windows Subsystem for ...

  2. OpenCV 腐蚀与膨胀(Eroding and Dilating)

    #include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #i ...

  3. freeRadius日志关闭

    vim /etc/raddb/radiusd.conf #file = ${logdir}/radius.log file = /dev/null vim /etc/raddb/modules/det ...

  4. 用数组实现队列(C++)

    #include <iostream> using namespace std; template<typename T, int size = 0> class Queue ...

  5. spring学习笔记三:Component注解(把POJO类实例化到spring的IOC容器中)

    Component注解:把普通的POJO 类实例化到spring的IOC容器中,就是定义成<bean id="" class=""> 项目目录树: ...

  6. 微软Project Oxford帮助开发人员创建更智能的应用

    Oxford帮助开发人员创建更智能的应用" title="微软Project Oxford帮助开发人员创建更智能的应用"> 假设你是一名对关于健身的应用充满奇思妙想 ...

  7. Hessian简介

    Hessian Hessian是一个轻量级的remoting onhttp工具,使用简单的方法提供了RMI的功能. 相比WebService,Hessian更简单.快捷.采用的是二进制RPC协议,因为 ...

  8. Linux下运行命令出现is not in the sudoers file的问题

    原因: 用户没有加入到sudo的配置文件里. 解决方法:  1.切换到root用户,运行visudo命令:  2.找到root ALL=(ALL) ALL,在下面添加一行 xxx  ALL=(ALL) ...

  9. Mac Webstrom 快捷键

    C + D 删除当前行 光标所在行 S + C + F 格式化 S  + C + R 重命名 C + { 查找上次 C + } 查找下次 C + S + DE 回到上一次编程位置 C + F 查找 C ...

  10. windows的各种扩展名详解

    Windows系统文件按照不同的格式和用途分很多种类,为便于管理和识别,在对文件命名时,是以扩展名加以区分的,即文件名格式为: 主文件名.扩展名.这样就可以根据文件的扩展名,判定文件的种类,从而知道其 ...