浅谈关于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 相关文章推荐
List the Codec Files on a Computer
Jun 18 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
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
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
详解php实现页面静态化原理
2017/06/21 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
python黑魔法之编码转换
2016/01/25 Python
简单实现Python爬取网络图片
2018/04/01 Python
Python使用OpenCV进行标定
2018/05/08 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
最新党员思想汇报
2014/01/01 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
2015年工程部工作总结
2015/04/30 职场文书
入队仪式主持词
2015/07/04 职场文书
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers