<div class="box_item">
  <el-form ref="aList" :model="form" :rules="formRules" label-width="210px">
    <el-form-item class="itemSty"
      v-for="(items, index) in form.aList"
      :label="items.name"
      :key="items.no"
      :prop="'aList.' + index + '.moneyStr'"
      :rules="formRules.moneyStr">
        <el-input type="text" :maxlength="7" placeholder="0.00-9999" v-model="items.moneyStr">
          <template slot="append">元</template>
        </el-input>
    </el-form-item>
  </el-form>
</div>
<div class="box_item">
  <el-form ref="bList" :model="form" :rules="formRules" label-width="210px">
    <el-form-item class="itemSty"
      v-for="(items, index) in form.bList"
      :label="items.name"
      :key="items.no"
      :prop="'bList.' + index + '.moneyStr'"
      :rules="formRules.moneyStr">
        <el-input type="text" :maxlength="7" placeholder="0.00-9999" v-model="items.moneyStr">
          <template slot="append">元</template>
        </el-input>
    </el-form-item>
  </el-form>
</div>

export default {
  data() {
    let _this = this
    let tool = this.tool
    let rule_rentMoney = function(rule,value,callback){
      if(value.length && !tool.validate.money(value) ){
        callback(new Error('请输入整数或小数(小数最多两位)'))
      }else if(value > 9999 ){
        callback(new Error('金额不能大于 9999 元'))
      }else{
        _this.edit(rule.field,value) // 验证通过调用保存方法
        callback()
      }
    }
    return{
      form:{
        aList:[],
        bList:[]
      },
      formRules:{
        moneyStr:[
          { validator: rule_rentMoney, trigger: 'blur' }
        ],
      }

    }
},
methods: {
  //清除验证的提示
  clearFn(){
    let that = this
    this.arrValidateKey.map( key =>{
      if(that.$refs[key]){
        that.$refs[key].resetFields();
      }
    })
  },
}
}

element 表单的input循环生成,并可单个input失去焦点单个验证并保存; (多个表单实例)的更多相关文章

  1. php循环生成的表单如何获得其各项值案例

    思路:输入框和按钮是用for循环生成的,不但要获取输入框里的各项值,并且要获取点击按钮的值,要知道是那个按钮被点击了,这里以生成5个为例.如图: 这是提交页面,点击的是“小米”. 这是显示结果,测试显 ...

  2. 031——VUE中表单控件处理之使用vue控制input和textarea表单项

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 循序渐进PYTHON3(十三) --3-- DJANGO之FORM表单(为自动生成的HTML标签添加样式)

    views.py from django.shortcuts import render,HttpResponse from django import forms import json impor ...

  4. GZFramwork数据库层《二》单据表增删改查(自动生成单据号码)

    运行效果: 使用代码生成器(GZCodeGenerate)生成tb_EmpLeave的Model 生成器源代码下载地址: https://github.com/GarsonZhang/GZCodeGe ...

  5. MySQL分库分表环境下全局ID生成方案 转

    在大型互联网应用中,随着用户数的增加,为了提高应用的性能,我们经常需要对数据库进行分库分表操作.在单表时代,我们可以完全依赖于数据库的自增ID来唯一标识一个用户或数据对象.但是当我们对数据库进行了分库 ...

  6. MySQL分库分表环境下全局ID生成方案

    在大型互联网应用中,随着用户数的增加,为了提高应用的性能,我们经常需要对数据库进行分库分表操作.在单表时代,我们可以完全依赖于数据库的自增ID来唯一标识一个用户或数据对象.但是当我们对数据库进行了分库 ...

  7. 【转】MySQL分库分表环境下全局ID生成方案

    转载一篇博客,里面有很多的知识和思想值得我们去思考. —————————————————————————————————————————————————————————————————————— 在大 ...

  8. laravel基础课程---14、表单验证(lavarel如何进行表单验证)

    laravel基础课程---14.表单验证(lavarel如何进行表单验证) 一.总结 一句话总结: lavarel的验证的功能比tp要[简单]且[强大]很多 直接控制器中:添加[规则数组]和[修改提 ...

  9. 分库分表之后全局id咋生成?

    1.面试题 分库分表之后,id主键如何处理? 2.面试官心里分析 其实这是分库分表之后你必然要面对的一个问题,就是id咋生成?因为要是分成多个表之后,每个表都是从1开始累加,那肯定不对啊,需要一个全局 ...

随机推荐

  1. linux服务器git pull/push时避免频繁输入账号密码

    1.先cd到根目录,执行git config --global credential.helper store命令 [root@iZ25mi9h7ayZ ~]# git config --global ...

  2. 深入理解JavaScript系列(35):设计模式之迭代器模式

    介绍 迭代器模式(Iterator):提供一种方法顺序一个聚合对象中各个元素,而又不暴露该对象内部表示. 迭代器的几个特点是: 1.访问一个聚合对象的内容而无需暴露它的内部表示. 2.为遍历不同的集合 ...

  3. 2、按钮:Buttons

    /* --- page1.html ---*/ <ion-content padding class="page1"> <h1>基本用法,实体框</h ...

  4. 迟到的UED(转发)

    2013UCAN用户体验设计论坛–精彩视频赏析 - 交互设计 博文 视觉设计 | TaoBaoUEDhttp://ued.taobao.org/blog/2013/09/2013ucan/

  5. 探寻hashmap

    Hashmap源码 1.  构造器: a)获得默认数组大小:1>>4 :16 b) 获得负载因子:0.75:衡量hashmap的空间使用程度 i.过大:使用空间更加充分,但是查找效率变低, ...

  6. struts quick start

    1.create a dynamic web project 2.import the needed jar(about 11) 3. request page(index.jsp) <%@ p ...

  7. 类数组arguments

    var isArray = function(){ return arguments; } isArray(1,2,3); // 返回[1,2,3] isArray.call(null,1,2,3); ...

  8. ArcGIS Geodabase OBJECTID重新初始编号的间接方法

    ArcGIS Geodabase OBJECTID为Long型,随着Feature的增加和删除自动编号,均为增加.即删除Feature后,再增加该号码自动只增加不重新编号. 间接方法可以实现重新从1编 ...

  9. Windows怎样共享文件夹给Virtualbox 里面的Ubuntu

    主要命令 1.  sudo mount -t vboxsf Share /media/sf_Share 2.   sudo adduser userid vboxsf

  10. Unity 多个Android sdk 插件如何组织目录

    一般Android 插件放在 Assets/Plugins/Android/ 下, 但是一个项目可能要用到多个sdk , 比如既要用 阿里九游的sdk 又要用 share sdk 怎么办呢, 难道要只 ...