当前位置: 首页 > article >正文

vue的el-form-item循环检验rules

<!-- 车长泛化配置組件 -->
<template>
  <div>
    <el-form :model="tempData" inline v-for="(item, index) in tempData.truckToCargoRule" :key="index"
      ref="truckToCargoRule" label-suffix=":">
  
 

      <el-form-item label="泛化车长组" :prop="`truckToCargoRule.${index}.min`"
        :rules="{ validator: validateMin, trigger: 'change' }">
        <el-input v-model="item.to.min" @input="minInput(index)" placeholder="请输入内容" style="width: 120px;"></el-input>
      </el-form-item>
      <el-form-item>
        到
      </el-form-item>
   
      <el-form-item :prop="`truckToCargoRule.${index}.max`" :rules="{ validator: validateMax, trigger: 'change' }">
        <el-input v-model="item.to.max" @input="maxInput(index)" placeholder="请输入内容" style="width: 120px;"></el-input>
      </el-form-item>

    </el-form>
    <el-button @click="submitForm('truckToCargoRule')" type="primary" style="margin-bottom: 10px;">校验</el-button>
  </div>
</template>

<script>
import { isEmpty } from '../helper'

export default {
  name: 'TruckLengthComp',
  props: {
    truckToCargoRule: {
      type: Array,
    }
  },
  data() {
    return {
      tempData: { truckToCargoRule: this.truckToCargoRule },

    }
  },
  methods: {
    validateMin(rule, value, callback) {
      let index = rule.field?.split('.')?.[1];
      let min = this.tempData.truckToCargoRule[index].to.min;
      let max = this.tempData.truckToCargoRule[index].to.max;
      if (isEmpty(min)) {
        callback(new Error('必填'));
      } else if (max < min) {
        callback(new Error('必须小于等于结束车长'));
      }
    },
    validateMax(rule, value, callback) {
      let index = rule.field?.split('.')?.[1];
      let min = this.tempData.truckToCargoRule[index].to.min;
      let max = this.tempData.truckToCargoRule[index].to.max;
      if (isEmpty(max)) {
        callback(new Error('必填'));
      } else if (max < min) {
        callback(new Error('必须大于等于开始车长'));
      }
    },
    submitForm() {
      let isValidate = true;
      for (let i = 0; i < this.$refs['truckToCargoRule'].length; i++) {
        this.$refs['truckToCargoRule'][i].validate((valid) => {
          if (!valid) {
            isValidate = false;
          }
        });
      }
      if (isValidate) {
        // 继续往下走
      }
    },
    maxInput(index) {
      let value = this.truckToCargoRule[index].to.max;
      const regex = /^\d*\.?\d{0,1}$/;
      if (value.length == 2 && value.startsWith('0') && value.charAt(1) != '.') {
        this.truckToCargoRule[index].to.max = value[1];
      } else if (regex.test(value)) {
        // 使用正则表达式限制输入为数字且最多一位小数
        this.truckToCargoRule[index].to.max = value;
      } else {
        // 如果不符合规则,则回退到上一次符合规则的值
        this.truckToCargoRule[index].to.max = value.slice(0, -1);
      }
    },
    minInput(index) {
      let value = this.truckToCargoRule[index].to.min;
      const regex = /^\d*\.?\d{0,1}$/;
      if (value.length == 2 && value.startsWith('0') && value.charAt(1) != '.') {
        this.truckToCargoRule[index].to.min = value[1];
      } else if (regex.test(value)) {
        // 使用正则表达式限制输入为数字且最多一位小数
        this.truckToCargoRule[index].to.min = value;
      } else {
        // 如果不符合规则,则回退到上一次符合规则的值
        this.truckToCargoRule[index].to.min = value.slice(0, -1);
      }
    }
  },
}
</script>

 

 

引用如下:

      <TruckLengthComp :truckToCargoRule="truckToCargoRule"></TruckLengthComp>
 truckToCargoRule: [
        {
          "from": {
            "min": 0,
            "includeMin": true,
            "max": 1.8,
            "includeMax": true
          },
          "to": {
            "min": 0,
            "includeMin": true,
            "max": 2.7,
            "includeMax": true
          }
        },
        {
          "from": {
            "min": 1.8,
            "includeMin": true,
            "max": 2.7,
            "includeMax": true
          },
          "to": {
            "min": 1.8,
            "includeMin": true,
            "max": 5.4,
            "includeMax": true
          }
        },
        {
          "from": {
            "min": 3,
            "includeMin": true,
            "max": 4,
            "includeMax": true
          },
          "to": {
            "min": 5,
            "includeMin": true,
            "max": 6,
            "includeMax": true
          }
        }
      ]


http://www.kler.cn/a/576337.html

相关文章:

  • AWS DynamoDB深度解析:高并发场景下的NoSQL数据库设计与优化实践
  • 重学 Android 自定义 View 系列(十一):文字跑马灯剖析
  • GStreamer —— 2.2、Windows下Qt加载GStreamer库后运行 - “教程2:GStreamer 概念“(附:完整源码)
  • Swift系列02-Swift 数据类型系统与内存模型
  • 智慧风电赋能绿色能源的新篇章
  • IDEA Generate POJOs.groovy 踩坑小计 | 生成实体 |groovy报错
  • WPF在特定领域的应用:打造一款专业的图像编辑工具
  • Maven 使用指南:基础 + 进阶 + 高级用法
  • 【JavaWeb】Web基础概念
  • 嵌入式中Type-C 与快充相关知识详解
  • let、const和var的区别是什么?
  • Unity自定义区域UI滑动事件
  • 【第19节】C++设计模式(行为模式)-Command(命令)模式
  • ECharts中yAxisIndex的作用
  • Java面试第十山!《Mybatis框架》
  • 鸿蒙应用开发深度解析:API 14核心特性与实战指南
  • 低空经济快速发展,无人机人才培养及校企实验室共建技术详解
  • Java UDP 通信:实现简单的 Echo 服务器与客户端
  • c#结合IL(中间语言)分析Try-Catch的内部机制及其对性能的影响
  • 信奥赛CSP-J复赛集训(模拟算法专题)(4):P1046 [NOIP 2005 普及组] 陶陶摘苹果