elementui中table进行表单验证

news2024/11/18 15:46:26

在这里插入图片描述

<el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
  <el-table :data="ruleForm.tableDataShou" border style="width: 100%;">
    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column prop="lon" label="经度" align="center">
        <template v-slot="scope">
           <el-form-item :prop="'tableDataShou.'+scope.$index+'.lon'" :rules="rules.lon">
              <el-input v-model="scope.row.lon"></el-input>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="lat" label="纬度" align="center">
         <template v-slot="scope">
            <el-form-item :prop="'tableDataShou.'+scope.$index+'.lat'" :rules="rules.lat">
              <el-input v-model="scope.row.lat"></el-input>
            </el-form-item>
          </template>
       </el-table-column>
  </el-table>
</el-form>
<el-button type="primary" @click="finish('ruleForm')">输入完成</el-button>
data() {
    var longitude = (rule, value, callback) => {
      let isTrue =
        /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/;
      if (!isTrue.test(value)) {
        callback(new Error("请按照经度规则输入"));
      } else if (value.slice(-1) == ".") {
        callback(new Error("最后一位不能是小数点"));
      } else {
        callback();
      }
    };
    var latitude = (rule, value, callback) => {
      let isTrue = /^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/;
      if (!isTrue.test(value)) {
        callback(new Error("请按照纬度规则输入"));
      } else if (value.slice(-1) == ".") {
        callback(new Error("最后一位不能是小数点"));
      } else {
        callback();
      }
    };
   return {
      ruleForm: {
        tableDataShou: [{ lon: "", lat: "" }],
      },
      rules: {
        lon: [{ require: true, validator: longitude, trigger: "change" }],
        lat: [{ require: true, validator: latitude, trigger: "change" }],
      },
    };
  },
finish(formName) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
        console.log("验证通过");
     } else {
         console.log("error submit!!");
         return false;
     }
  });
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1270182.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python - Real-ESRGAN 提升图像、视频清晰度 - 最高可达 4 K

目录 一.引言 二.Real-ESRGAN 理论 1.模型简介 2.经典退化模型 ◆ 退化过程全览 ◆ K - 高斯滤波 ◆ N - 噪声 ◆ ↓r - Resize ◆ jpeg - 压缩 3.高阶退化模型 4.环形和超调伪影 5.网络结构 ◆ ESRGAN 生成器 ◆ U-Net 鉴别器 三.Real-ESRGAN 实战 1.快速体验…

CNS0项目创建交货单增加销售办事处

1、业务需求 1.1、销售办事处介绍 销售办事处是指在企业中负责销售活动的区域性单位或部门。在SD模块中&#xff0c;可以表示企业的不同销售地点、销售办公室、分销中心或分公司。 销售办事处扮演着多种角色和职责&#xff0c;例如&#xff1a; 销售活动管理&#xff1a;销售…

福州大学《嵌入式系统综合设计》 实验十二:图像压缩标准JPEG编解码

一、实验目的 掌握基于算能平台的JPEG压缩编码方法以及开发环境&#xff0c;包括开发主机环境搭建&#xff0c;硬件嵌入式开发板的连接&#xff0c;云平台的配置&#xff0c;编码程序的编译、运行等。 二、实验内容 搭建实验开发环境&#xff0c;并编写静止图像jpeg格式编解…

Linux常用命令——badblocks命令

在线Linux命令查询工具 badblocks 查找磁盘中损坏的区块 补充说明 badblock命令用于查找磁盘中损坏的区块。 硬盘是一个损耗设备&#xff0c;当使用一段时间后可能会出现坏道等物理故障。电脑硬盘出现坏道后&#xff0c;如果不及时更换或进行技术处理&#xff0c;坏道就会越…

渗透测试考核(靶机1)

信息收集 主机发现 nbtscan -r 172.16.17.0/24 发现在局域网内&#xff0c;有两台主机名字比较可疑&#xff0c;177和134&#xff0c;猜测其为目标主机&#xff0c;其余的应该是局域网内的其他用户&#xff0c;因为其主机名字比较显眼&#xff0c;有姓名的拼音和笔记本电脑的…

AI搜索相关性在网站和APP上的应用

设定场景&#xff1a;您在寻找一件新衣服&#xff0c;所以在浏览最喜欢的网店。您跳到搜索栏上&#xff0c;输入您要找的东西。您期待出现什么结果&#xff1f; 高度准确、相关和即时的结果。 无论在什么网站上搜索&#xff0c;寻找什么&#xff0c;甚至在打错字或使用了错误的…

【算法刷题】Day9

文章目录 611. 有效三角形的个数![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/9d627e680e9144a2b67474a1d80aa030.png)题解&#xff1a;代码&#xff1a; LCR 179. 查找总价格为目标值的两个商品题解&#xff1a;代码&#xff1a; 611. 有效三角形的个数 原题链…

双向ESD保护 汽车级TVS二极管 ESD9B3.3ST5G工作原理、特性参数、封装形式

什么是汽车级TVS二极管&#xff1f; TVS二极管是一种用于保护电子电路的电子元件。它主要用于电路中的过电压保护&#xff0c;防止电压过高而损坏其他部件。TVS二极管通常被称为“汽车级”是因为它们能够满足汽车电子系统的特殊要求。 在汽车电子系统中&#xff0c;由于车辆启…

零基础自学编程,中文编程工具下载,中文编程工具构件之弹出菜单构件简介

一、前言&#xff1a; 零基础自学编程&#xff0c;中文编程工具下载&#xff0c;中文编程工具构件之弹出菜单构件简介 编程系统化教程链接 https://jywxz.blog.csdn.net/article/details/134073098?spm1001.2014.3001.5502 给大家分享一款中文编程工具&#xff0c;零基础…

二阶龙格塔库积分法求解混沌产生方程(求助)

最近论文中常常接触到激光产生混沌的方程&#xff0c;激光器作为非线性元件&#xff0c;在信息处理中具有非常大的潜力&#xff0c;其中激光产生混沌应用在通信中很有用处。论文中对于模拟数据部分&#xff0c;采用了以下公式来产生混沌&#xff1a;以此公式产生混沌的方法应用…

【HTML】VScode不打开浏览器实时预览html

1. 问题描述 预览HTML时&#xff0c;不想打开浏览器&#xff0c;想在VScode中直接实时预览 2. 解决方案 下载Microsoft官方的Live Preview 点击预览按钮即可预览

Linux设置Nginx开机自启

文章目录 获取linux系统是多少位: getconf LONG_BIT获取CentOS版本: lsb_release -a获取nginx的版本: nginx -version第一步配置文件 vim /etc/rc.local最底部增加这一行&#xff1a; /usr/local/nginx/sbin/nginx 第二步注册systemctl服务 在/usr/lib/systemd/system目录…

OpenAI神秘项目“Q星”浮出水面,它会威胁人类吗?

来源&#xff1a; 现代快报全媒体 2023-11-26 23:55:15 百年之后&#xff0c;人类再看这段OpenAI的“宫斗大戏”&#xff0c;或许会从商战之外&#xff0c;看到2023年的人类面对未知世界忧心忡忡。 是否要继续投入资源&#xff0c;催动AI进化&#xff1f;身处2023年的人类…

numpy知识库:numpy数据类型转换技巧

需求背景 基于numpy和opencv生成一个随机噪声灰度图像&#xff0c;像素值是范围[0, 256)内的整数&#xff0c;图像形状为(512, 512)&#xff0c;并显示图像&#xff0c;源码如下 import numpy as np import cv2img np.random.randint(0, 256, size[512, 512]) cv2.imshow(&q…

[架构之路-254]:目标系统 - 设计方法 - 软件工程 - 软件设计 - 架构设计 - 全程概述

目录 一、软件架构概述 1.1 什么是软件架构 1.2 为什么需要软件架构设计 1.3 软件架构设计在软件设计中位置 &#xff08;1&#xff09;软件架构设计&#xff08;层次划分、模块划分、职责分工&#xff09;&#xff1a; &#xff08;2&#xff09;软件高层设计、概要设计…

同旺科技 分布式数字温度传感器 -- Modbus Poll测试

内附链接 1、数字温度传感器 主要特性有&#xff1a; ● 支持PT100 / PT1000 两种铂电阻&#xff1b; ● 支持 2线 / 3线 / 4线 制接线方式&#xff1b; ● 支持5V&#xff5e;17V DC电源供电&#xff1b; ● 支持电源反接保护&#xff1b; ● 支持通讯波特率1200bps、2…

一文秒懂|Linux字符设备驱动

我的圈子&#xff1a; 高级工程师聚集地 我是董哥&#xff0c;高级嵌入式软件开发工程师&#xff0c;从事嵌入式Linux驱动开发和系统开发&#xff0c;曾就职于世界500强公司&#xff01; 创作理念&#xff1a;专注分享高质量嵌入式文章&#xff0c;让大家读有所得&#xff01; …

亚马逊云与生成式 AI 的融合:未来展望与综述

文章目录 前言生成式AI的定义生成式 AI应用领域AI办公软件AI创意工具AI企业服务AI网络安全AIIT 运维AI软件开发AI数据智能AI数字代理AI金融AI医疗AI教育AI工业AI汽车AI机器人 后记 前言 在当今数据时代&#xff0c;人工智能和云计算已经成为了企业发展和创新的必不可少的工具。…

视频监控技术入门到精通,一步到位!

在当今信息化社会&#xff0c;视频监控技术已经成为保障公共安全、提高工作效率以及保护财产的关键技术之一。视频监控系统不仅仅是简单的安全工具&#xff0c;更是一个集成了高科技设备、智能分析算法和网络通信的综合系统。 客户案例 零售业 上海某大型零售商有多个门店分布…

SourceInsight - Relation Windows

磨刀不误砍柴工&#xff0c;你使用的工具决定了你的下限。我平时使用较多的代码编辑工具就是SourceInsight&#xff0c;这个工具速度快&#xff0c;操作方便&#xff0c;但处理非常大的项目的性能不是很理想&#xff0c;比如你要是添加整个Linux Kernel的源代码的话。 在使用SI…