浅谈关于iview表单验证的问题


Posted in Javascript onSeptember 29, 2018

关于iview表单验证的问题

iview表单验证的步骤:

第一步:给 Form 设置属性 rules   :rules
第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“
第三步:注意:Form标签里面是  :model
第四步:注意:在Form标签里面必须添加  ref,相当于id,在此范围内的表单验证有效
第五步:在操作保存按钮时,添加方法,对整个表单进行校验,参数为检验完的回调,会返回一个 Boolean 表示成功与失败。

<Form :label-width="100" ref='contractForm' :model='contractForm' :rules="ruleValidate">
    <FormItem label='合同编号:' prop="contractNo">
      <Input placeholder="请输入合同编号" v-model='contractForm.contractNo'></Input>
    </FormItem>
    //data里面,写验证
    ruleValidate: {
      contractNo:[
        { required: true, message: '合同编号不能为空', trigger: 'blur' },
      ],
    }
    //methods里面,写方法
    addChange(name){
       this.$refs[name].validate(valid => {
         if (valid) {
         }
       }); 
  </Form>

iview进行表单验证select时候验证失败的问题:

用iview自带的表单验证select标签的时候,一直验证不通过,因为iview默认校验数据类型为String,而我的select用的value是number类型的

ruleValidate: {
  customer:[
      { required: true, message: '客户名称不能为空', trigger: 'blur',type:'number'},
    ], 
   }

iview进行表单验证时间日期验证失败的问题:

和下拉框一样,日期的类型是data

ruleValidate: {
  advance:[
      { required: true, message: '预送达时间不能为空', trigger: 'change' ,type: 'date'},
    ],
   }

iview进行多重验证的写法:

多重验证包括第一要验不能为空,第二要验证限制的一些长度,写正则表达式等

ruleValidate: {
       goodsNum: [
           { required: true, message: '数量不能为空', trigger: 'blur' },
           { type: 'string',pattern:/^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/, message:'数量应为正浮点数且不超过9999.99', trigger:'blur'},
            ],
   }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
JavaScript 指导方针
Apr 05 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 #Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 #Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 #Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 #Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 #Javascript
详解React之key的使用和实践
Sep 29 #Javascript
vue给组件传递不同的值方法
Sep 29 #Javascript
You might like
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
js new Date()实例测试
2019/10/31 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
django表单的Widgets使用详解
2019/07/22 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
关于读书的演讲稿500字
2014/08/27 职场文书
完整版商业计划书
2014/09/15 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
2014年公务员工作总结
2014/11/18 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
大学四年个人总结
2015/03/03 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
python Polars库的使用简介
2021/04/21 Python
聊聊JS ES6中的解构
2021/04/29 Javascript