elementui中table进行表单验证

在这里插入图片描述

<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.mzph.cn/news/183296.shtml

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

相关文章

【23种设计模式·全精解析 | 自定义Spring框架篇】Spring核心源码分析+自定义Spring的IOC功能,依赖注入功能

文章目录 ⭐⭐⭐Spring核心源码分析自定义Spring框架⭐⭐⭐一、Spring使用回顾二、Spring核心功能结构1、Spring核心功能2、bean概述 三、Spring IOC相关接口分析1、BeanFactory解析2、BeanDefinition解析3、BeanDefinitionReader解析4、BeanDefinitionRegistry解析5、创建容器…

伪集群配置

编辑core-site 配置core-site 配置hdfs-site 将以下的文件配置进去 启动一下hadoop产生tmp文件 产生这个叫namenode的文件并格式化 回到~目录 再配置以下信息 配置以下信息 重启文件 再重新格式化配置namenode 再启动一下&#xff0c;然后jps看看&#xff0c;出现这样就…

java后端自学总结

自学总结 MessageSource国际化接口总结 MessageSource国际化接口 今天第一次使用MessageSource接口,比较意外遇到了一些坑 messageSource是spring中的转换消息接口&#xff0c;提供了国际化信息的能力。MessageSource用于解析 消息&#xff0c;并支持消息的参数化和国际化。 S…

运维知识点-openResty

openResty 企业级实战——畅购商城SpringCloud-网站首页高可用解决方案-openRestynginxlua——实现广告缓存测试企业级实战——畅购商城SpringCloud-网站首页高可用解决方案-openRestynginxlua——OpenResty 企业级实战——畅购商城SpringCloud-网站首页高可用解决方案-openRes…

优化器原理——权重衰减(weight_decay)

优化器原理——权重衰减&#xff08;weight_decay&#xff09; weight_decay的作用 原理解析 实验观察 在深度学习中&#xff0c;优化器的 weight_decay 参数扮演着至关重要的角色。它主要用于实现正则化&#xff0c;以防止模型过拟合。过拟合是指模型在训练数据上表现优异&…

从意义中恢复,而不是从数据包中恢复

从书报&#xff0c;录放机&#xff0c;电视机到智能手机&#xff0c;vr 眼镜&#xff0c;所有学习的&#xff0c;娱乐的工具或玩具&#xff0c;几乎都以光声诉诸视听&#xff0c;一块屏幕和一个喇叭。 视觉和听觉对任何动物都是收发信息的核心&#xff0c;诉诸视觉和听觉的光和…

机器学习笔记 - 3D数据的常见表示方式

一、简述 从单一角度而自动合成3D数据是人类视觉和大脑的基本功能,这对计算机视觉算法来说是比较难的。但随着LiDAR、RGB-D 相机(RealSense、Kinect)和3D扫描仪等3D传感器的普及和价格的降低,3D 采集技术的最新进展取得了巨大飞跃。与广泛使用的 2D 数据不同,3D 数据具有丰…

[node] Node.js 中Stream流

[node] Node.js 中Stream流 什么是 Stream流操作从流中读取数据写入流管道流链式流 什么是 Stream Stream 是一个抽象接口&#xff0c;Node 中有很多对象实现了这个接口。例如&#xff0c;对http 服务器发起请求的request 对象就是一个 Stream&#xff0c;还有stdout&#xff…

(C++)复写零--双指针法

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能&#xff0c;轻松拿下世界 IT 名企 Dream Offer。https://le…

ESP32-Web-Server 实战编程- 使用 AJAX 自动更新网页内容

ESP32-Web-Server 实战编程- 使用 AJAX 自动更新网页内容 概述 什么是 AJAX &#xff1f; AJAX Asynchronous JavaScript and XML&#xff08;异步的 JavaScript 和 XML&#xff09;。 AJAX 是一种用于创建快速动态网页的技术。 传统的网页&#xff08;不使用 AJAX&#…

Linux 进程(一)

1 操作系统 概念&#xff1a;任何计算机系统都包含一个基本的程序集合&#xff0c;称为操作系统(OS)。笼统的理解&#xff0c;操作系统包括 内核&#xff08;进程管理&#xff0c;内存管理&#xff0c;文件管理&#xff0c;驱动管理&#xff09; 其他程序&#xff08;例…

linux安装docker(脚本一键安装配置docker)

1、创建脚本 vi initDocker.sh #安装前先更新yum&#xff0c;防止连接镜像失败 yum -y update#卸载系统之前的docker&#xff08;可选择&#xff0c;我这里直接注释了&#xff09; #yum remove docker docker-client docker-client-latest docker-common docker-latest docke…

Go 谈论了解Go语言

一、引言 Go的历史回顾 Go语言&#xff08;通常被称为Go或Golang&#xff09;由Robert Griesemer、Rob Pike和Ken Thompson在2007年开始设计&#xff0c;并于2009年正式公开发布。这三位设计者都曾在贝尔实验室工作&#xff0c;拥有丰富的编程语言和操作系统研究经验。Go的诞生…

Wordpress自动定时发布怎么开通-Wordpress怎么自动发布原创文章

在当今数字化时代&#xff0c;博客已经成为许多人分享观点、经验和知识的重要平台。然而&#xff0c;对于博主们来说&#xff0c;每天按时发布一篇又一篇的文章可能是一项具有挑战性的任务。为了解决这个问题&#xff0c;一些创新的工具应运而生&#xff0c;其中包括WordPress的…

vuepress-----4、侧边栏

# 4、侧边栏 # 自动生成侧栏 如果你希望自动生成一个仅仅包含了当前页面标题&#xff08;headers&#xff09;链接的侧边栏&#xff0c;你可以通过 YAML front matter 来实现&#xff1a; --- sidebar: auto ---你也可以通过配置来在所有页面中启用它&#xff1a; // .vuep…

深入探索 Vue 响应式原理:数据驱动视图的奥秘

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

Docker快速创建一个单机版的Jenkins实例

谈到 CI/CD&#xff0c;那便少不了这里面的佼佼者 Jenkins&#xff0c;正如 Jenkins 官网说的一样&#xff1a;“Build great things at any scale”&#xff0c;构建伟大&#xff0c;无所不能&#xff01; 话不多说&#xff0c;该篇文章将会带你使用 Docker 快速创建一个单机…

COGVLM论文解读(COGVLM:VISUAL EXPERT FOR LARGE LANGUAGE MODELS)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、摘要二、引言三、模型方法1、模型思路2、融合公式 四、训练方法总结 前言 2023年5月18日清华&智谱AI发布并开源VisualGLM-6B以来&#xff0c;清华KEG&…

4.6-容器的端口映射

首先&#xff0c;我们来拉取Nginx的image镜像。 docker pull nginx 接下来我们创建一个Nginx的容器。 docker run --name nginx -d nginx 但是&#xff0c;这样启动nginx容器的话我们没法访问。这个时候怎么办呢&#xff1f;就需要将Nginx这个服务暴露给外面的世界。 这时可以使…

【C++】POCO学习总结(八):通知Notifications和事件Events

【C】郭老二博文之&#xff1a;C目录 1、Notifications和Events的区别 1&#xff09;通知Notifications&#xff1a;如果观察者不知道或不关心事件的来源&#xff0c;则使用通知Notifications。 Poco::NotificationCenter或Poco::NotificationQueue位于源source和目标target之…