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 相关文章推荐
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
浅谈关于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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
怎样让char类型的东西转换成int类型
2013/12/09 面试题
产品开发计划书
2014/04/27 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers