验证输入字符串必须为数字

html:

                <FormItem label="兑换积分:" prop="exchangeIntegral">
<Input v-model="formSpecAdd.exchangeIntegral" placeholder="请输入兑换积分" style="width: 250px"></Input>
</FormItem> <FormItem label="库存数量:" prop="stockNum">
<Input v-model="formSpecAdd.stockNum" placeholder="请输入库存数量" style="width: 250px"></Input>
</FormItem> <FormItem label="商品价值:" prop="productMoney">
<Input v-model="formSpecAdd.productMoney" placeholder="请输入商品价值" style="width: 250px"></Input>
</FormItem>

js:

                    exchangeIntegral: [
{required: true, message: '请输入兑换积分', trigger: 'blur'},
{type: 'string', pattern: /^\d+$/, message: '请输入数字', trigger: 'blur'}
], stockNum: [
{required: true, message: '请输入库存数量', trigger: 'blur'},
{type: 'string', pattern: /^\d+$/, message: '请输入数字', trigger: 'blur'}
], productMoney: [
{required: true, message: '请输入商品价值', trigger: 'blur'},
{type: 'string', pattern: /^\d+$/, message: '请输入数字', trigger: 'blur'}
],

或者: 直接将输入框定义为 number类型

                <FormItem label="兑换积分:" prop="exchangeIntegral">
<Input v-model="formSpecAdd.exchangeIntegral" number placeholder="请输入兑换积分" style="width: 250px"></Input>
</FormItem>

js:验证

                    exchangeIntegral: [
{required: true, type: 'number', message: '请输入兑换积分', trigger: 'blur'},
{type: 'number', message: '请输入数字', trigger: 'blur'}
],

请参考:

https://www.cnblogs.com/chenmz1995/p/10804076.html

https://www.iviewui.com/components/form#ZDYYZ

https://github.com/yiminghe/async-validator

iview表单验证数字的更多相关文章

  1. iview表单验证--数字必填+校验

    直接使用: { required: true, type:"integer", message:"请填写整数", trigger: "blur&quo ...

  2. iview表单验证下拉框不通过问题

    iview表单验证的步骤: 第一步:给 Form 设置属性 rules :rules 第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步:注意 ...

  3. iview表单验证不生效问题注意点

    按照iview官网介绍写的form表单验证,但是无论填写与否都不进行校验,找了很久的原因,突然才发现一个关键的地方,一定要加props!!! https://blog.csdn.net/xuaner8 ...

  4. iview表单验证之正则验证、函数验证

    iview表单验证之正则 正则验证: 代码: loginRules: { stringLength: [ { required: true, message: '该字段不能为空', trigger: ...

  5. 有关使用 iview 表单验证的问题

    Vue的UI解决框架,element-UI, iview-UI 有关表单验证使用的是同一个插件,async-validator,有关这个插件的用法就不做赘述,但是在iview表单的使用中可能会用到验证 ...

  6. iview 表单验证不通过问题?

    项目需要,需要怂iview..使用一段时间感觉跟elementUI用起来差不多很方便.使用过程中遇到表单验证问题,如何避免在验证过程中偶尔出现验证不通过的异常情况? <1>:给 <F ...

  7. vue中使用iview表单验证时this指针问题

    需求 使用iview,在提交时对值b进行验证,使其不能大于值a 实现 <Form ref="config" :model="config" :rules= ...

  8. iview 表单验证

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. iview表单验证trigger:'change,blur'

    今天发现,如果设置select的trigger:'blur'就算选择之后还是边框是红色的,之后查了一下iview的文档,也没有找到准确的蚊子描述,只看到form那个组件其中有一个例子,大概是selec ...

随机推荐

  1. iview -- vue modal 显示到最顶层 层级

    给想要显示到顶层的modal 设置class属性 .my-modal-parent { position: fixed; // 浮动 z-index:; }

  2. python中使用requests模块的post()函数时形参 data和json的区别

    通常,你想要发送一些编码为表单形式的数据--非常像一个 HTML 表单.要实现这个,只需简单地传递一个字典给 data 参数.你的数据字典在发出请求时会自动编码为表单形式: >>> ...

  3. python 调用父类方法, 重写父类构造方法, 不显式调用,会报错

    子类不显式调用父类的构造方法,而父类构造函数初始化了一些属性,就会出现问题 如果子类和父类都有构造函数,子类其实是重写了父类的构造函数,如果不显式调用父类构造函数,父类的构造函数就不会被执行,导致子类 ...

  4. 解决jenkins日志爆满 DNS查询错误

    一.故障 公司的jenkins因为日志量太大把磁盘占满,进而影响了其他程序,仔细一看日志文件"/var/log/jenkins/jenkins.log"几分钟产生了30G的日志 日 ...

  5. laydate V5-0-8动态设置min值

    laydate通过设置min,max值来对用户输入的时间做约束 laydate v1.0版本 //日期插件 var start={ elem:"#start", format:&q ...

  6. Java同步数据结构之LinkedBlockingDeque

    前言 前面介绍完了队列Queue/BlockingQueue的实现类,接下来介绍双端队列Deque/BlockingDeque的实现类之一LinkedBlockingDeque,它是一种基于链表的可选 ...

  7. Servlet的运行原理

  8. linux高可用集群(HA)原理详解

    高可用集群 一.什么是高可用集群 高可用集群就是当某一个节点或服务器发生故障时,另一个节点能够自动且立即向外提供服务,即将有故障节点上的资源转移到另一个节点上去,这样另一个节点有了资源既可以向外提供服 ...

  9. git服务器搭建---便签做备注

    今天,简单搭建了一下git服务器.发现一篇文章写的挺好的 http://www.cnblogs.com/trying/archive/2012/06/28/2863758.html 并简单和廖雪峰的结 ...

  10. JS中的prototype、__proto__与constructor(图解)

    作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...