浅谈关于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 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
js实现小星星游戏
Mar 23 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
微信公众号网页分享功能开发的示例代码
May 27 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通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
python根据京东商品url获取产品价格
2015/08/09 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
事业单位请假制度
2014/01/13 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
企业宣传标语
2014/06/09 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android