iview同时验证多个表单问题总结


Posted in Javascript onSeptember 29, 2018

iview验证一个表单问题:

在上一篇文章中总结了iview表单验证的问题。其实有两种写法:在点击验证时,这样写时,注意在前面的方法中将要验证的form表单加进去。

<Form ref="addAreaForm" :model="addAreaForm" :rules="ruleValidate" :label-width="120"></Form>
//点击确认按钮
<Button type='primary' @click='addAreaOK("addAreaForm")'>确定</Button>

addAreaOK(name){
  this.$refs[name].validate((valid)=>{
  if (valid){
    alert('验证成功')
  }
  })
}

还有一种写法:保存按钮不传form表单,在验证时直接this.$refs.addpurchaseForm.validate

<Button type="primary" @click="handleSubmit">保存</Button>
this.$refs.addpurchaseForm.validate((valid) => {
      // console.log(valid)
        if (valid) {
          alert('验证成功')
        }
  })

iview验证多个表单问题:在多表单验证时,让页面中的两个form都通过校验才能保存。解决方法就是:先验证第一个,在第一个验证通过得里面,验证第二个。

this.$refs.addpurchaseForm.validate((valid) => {
        // console.log(valid) //第一层验证第一个表单
          if (valid) {
          this.$refs.gasDataForm.validate((valid) => {
          // console.log(valid)//第二层验证第二个表单
             if(valid){
               alert('验证成功')
             }
            })
         }
       })

补充:iview 表单number验证

iview同时验证多个表单问题总结

iview同时验证多个表单问题总结

iview同时验证多个表单问题总结

将原来的number转为string来处理,并且在验证中判断是否是整数。

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

Javascript 相关文章推荐
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
Vuex 入门教程
Jan 10 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
Javascript异步编程async实现过程详解
Apr 02 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
浅谈关于iview表单验证的问题
Sep 29 #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
You might like
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
php 执行系统命令的方法
2009/07/07 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
php数组添加元素方法小结
2014/12/20 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
php删除指定目录的方法
2015/04/03 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
基于Python的身份证号码自动生成程序
2014/08/15 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
Python项目打包成二进制的方法
2020/12/30 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
飞机制造技术专业求职信
2014/07/27 职场文书
教师节倡议书2015
2015/04/27 职场文书
百年孤独读书笔记
2015/06/29 职场文书
Vue h函数的使用详解
2022/02/18 Vue.js
详解PyTorch模型保存与加载
2022/04/28 Python