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

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验证

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

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

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

    iview验证一个表单问题: 在上一篇文章中总结了iview表单验证的问题.其实有两种写法:在点击验证时,这样写时,注意在前面的方法中将要验证的form表单加进去. <Form ref="addAreaForm" :model="addAreaForm" :rules="ruleValidate" :label-width="120"></Form> //点击确认按钮 <Button type='

  • jQuery Validator验证Ajax提交表单的方法和Ajax传参的方法

    serialize() 方法通过序列化表单值,创建 URL 编码文本字符串.代替了一个一个传参的方式 以往写的ajax传参方式 $.ajax({ url : "${ctx}/SJStandardDamPartition/insertOrUpdateDamPartition", type : "post", dataType : "json", data: {beginsectionid:function(){ return $('#number

  • Bootstrap 表单验证formValidation 实现表单动态验证功能

    Bootstrap 表单验证formValidation 实现表单动态验证功能

    动态添加input并动态添加新验证方式! init状态: 点击"+"后: 验证后: 知识点: 1 先去官网下载:http://formvalidation.io/ 2 导入文件,注意事项我就不多说了在远程验证那篇我已经讲过. 3 用到的关键字:addField.removeField.different 4注意一点就是官网里的例子他们的name是不一样的.我这里比较偷懒.且项目ajax的时候不是用的form表单提交,而是自己并接成json提交,所以x,y的name的名字一样. 好开始:

  • vue+ElementUI 关闭对话框清空验证,清除form表单的操作

    前面跟大家提到过 elementUI验证的问题,那么今天就来看看 点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示 1.首先在你的对话框 取消按钮 加一个click事件,例如:(ps::callOf里面的addGroupData和ref一 一对应起来) <div slot="footer" class="dialog-footer"> <el-button @click="callOf('addGr

  • antd+vue实现动态验证循环属性表单的思路

    antd+vue实现动态验证循环属性表单的思路

    希望实现查询表单的某些属性可以循环验证必填项: 需求: 1.名称,对比项,备注必填,默认为一行,可增加多行 2.根据名称,动态请求对比项列表,名称变化时,清空该行当前选择的对比项 思路:将整个搜索分成了两个表单,分别去做验证.一个是可动态添加的循环表单form,另一个为普通表单dateForm html <a-form :form="form" @keyup.enter.native='searchQuery'> <div class="dynamic-wr

  • 自己编写的支持Ajax验证的JS表单验证插件

    自己编写的支持Ajax验证的JS表单验证插件

    自己编写了一个表单验证插件,支持ajax验证,使用起来很简单. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:rule表示验证规则,msg表示错误提示信息:to表示要验证的元素的name值,如果元素是单个的,to可以不写.该插件会遍历每个有valid的span标签,找出它前面需要验证的元素,根据rule验证,如果验证不通过,则显示边框为红色,鼠标放在元素上时显示错误信息. 验证时机:1.点击提交按钮时显式调用验

  • Angular2表单自定义验证器的实现

    Angular2表单自定义验证器的实现

    本文主要给大家介绍如何判断验证器的结果.在这里,我们就来看看怎样实现一个自定义的验证器. 目标 我们要实现一个验证手机号的验证器,使用的实例还是基于之前的文章里面的实例,也就是用户信息输入的表单页面.我们在手机号的元素上添加一个验证手机号的验证器.然后,如果手机号验证失败,就显示一个错误,页面如下: 这部分教程的代码可以从github获取: git clone https://github.com/Mavlarn/angular2-forms-tutorial 如果要运行,进入项目目录,运行下面

  • AngularJs表单验证实例详解

    AngularJs表单验证实例详解

    常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <input type="text" ng-minlength="

  • 详解AngularJS实现表单验证

    详解AngularJS实现表单验证

    开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <<input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <<input type="tex

  • 详细解读AngularJS中的表单验证编程

    详细解读AngularJS中的表单验证编程

    需求 Name 必填 Username 非必填,最小长度3,最大长度8 Email 非必填,但必须是合法的email 验证未通过的表单不能提交 显示一个必填或者非法email格式的错误信息 如果正确提交就弹出一个祝贺信息 现在知道我们的目标了吧,让我们一起来构建这个东西吧. Angular 的表单属性 $valid, $invalid, $pristine, $dirty Angular 提供了有关表单的属性来帮助我们验证表单. 他们给我们提供了各种有关一个表单及其输入的信息,并且应用到了表单和

随机推荐