vue3+ts中判断输入的值是不是经纬度格式

vue3+ts中判断输入的值是不是经纬度格式

vue代码:

<template #bdjhwz="{ record }"><a-row :gutter="8" v-show="!record.editable"><a-col :span="12"><a-input placeholder="经度" v-model:value="record.lat" :max-length="15" @blur="latLngBlur(record, 'lat')" /></a-col><a-col :span="12"><a-input placeholder="纬度" v-model:value="record.lng" :max-length="15" @blur="latLngBlur(record, 'lng')" /></a-col></a-row></template>

ts代码:

<script lang="ts" setup>import { ref, defineExpose, onMounted, Ref, watch } from 'vue';import { useMessage } from '/@/hooks/web/useMessage';const { createMessage: msg } = useMessage();/*** 经纬度输入校验*/const latLngBlur = (record, type = 'lat') => {if (record[type] && !isNaN(record[type])) {const num = Number(record[type]);const range = type === 'lat' ? { min: -180, max: 180 } : { min: -90, max: 90 };if (num > range.max || num < range.min) {msg.warn(`${type === 'lat' ? '经度' : '纬度'}格式输入有误!`);record[type] = '';}} else {msg.warn('请输入正确的数值!');record[type] = '';}};![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/15bc44ff947a425dabb19cea15adc1b9.png)</script>

效果:
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

搜索之bfs

广度优先搜索的定义&#xff1a; 广度优先搜索&#xff08;Breadth-First Search&#xff0c;简称BFS&#xff09;是一种用于遍历或搜索树或图的算法。该算法从根节点&#xff08;或任意一个节点&#xff09;开始&#xff0c;并探索最靠近根节点的邻居节点。在遍历过程中&…

ELK日志分析系统(上)

目录 引言 一、ELK日志分析系统简介 1.1 日志服务器 1.2 ELK日志分析系统的组成 1.3 日志处理步骤 二、Elasticsearch介绍 2.1 概述 2.2 核心概念 三、Logstash介绍 3.1 概述 3.2 主要组件 四、Kibana介绍 4.1 概述 4.2 主要功能 五、ELK的工作原理 六、部署ELK…

创建线程池的例子

public class ExecutorTest {public static void main(String[] args) {//创建线程池的5种方式&#xff1a; // Executors.newFixedThreadPool();//创建固定线程数的线程池 // Executors.newSingleThreadExecutor();//创建单线程的线程池 // Executors.ne…

【C++进阶】--智能指针

1. 为什么需要智能指针 首先我们来分析一下下面这段代码 #include<iostream> using namespace std; int div() {int a, b;cin >> a >> b;if (b 0)throw invalid_argument("除0错误");return a / b; } void Func() {int* p1 new int;int* p2 n…

监控系统Prometheus--与第三方框架集成

文章目录 Prometheus和Flink集成拷贝jar包修改Flink配置为了运行测试程序&#xff0c;启动netcat启动hdfs、yarn&#xff0c;提交flink任务到yarn上可以通过8088跳到flinkUI的job页面&#xff0c;查看指标统计刷新Prometheus页面&#xff0c;如果有flink指标&#xff0c;集成成…

Matlab 2024安装教程(附免费安装包资源)

鼠标右击软件压缩包&#xff0c;选择“解压到MatlabR2024a“。 2.打开解压后的文件夹&#xff0c;鼠标右击“MATHWORKS_R2024A“选择装载。 鼠标右击“setup“选择”以管理员身份运行“。点击“是“&#xff0c;然后点击”下一步“。复制一下密钥粘贴至输入栏&#xff0c;然后…

【1000个GDB技巧之】GDB运行中如何动态更新内存的corefile?

场景 /proc/kcore包括了linux内存&#xff0c;但是在gdb试用中的时候&#xff0c;加载的可能支持某个快照。如何动态读取最新数据而不用退出重新加载&#xff0c;就使用GDB的core-file进行处理。 core-file /proc/kcore效果&#xff1a; 未更新前数据不会变化&#xff0c;更新…

【STL详解 —— stack和queue的介绍及使用】

STL详解 —— stack和queue的介绍及使用 stackstack的定义方式stack的使用 queuequeue的定义方式queue的使用 stack stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其只能从容器的一端进行元素的插入与提取操作。 stack的定义方式 首…

鉴权设计(一)———— 登录验证

1、概述 网站系统出于安全性的考虑会对用户进行两个层面的校验&#xff1a;身份认证以及权限认证。这两个认证可以保证只有特定的用户才能访问特定的数据的需求。 本文先实现一个基于jwt拦截器redis注解实现的简单登录验证功能。 2、设计思路 jwt用于签发token。 拦截器用于拦…

Kubernetes的Ingress Controller

前言 Kubernetes暴露服务的方式有一下几种&#xff1a;LoadBlancer Service、ExternalName、NodePort Service、Ingress&#xff0c;使用四层负载均衡调度器Service时&#xff0c;当客户端访问kubernetes集群内部的应用时&#xff0c;数据包的走向如下面流程所示&#xff1a;C…

vue-router 原理【详解】hash模式 vs H5 history 模式

hash 模式 【推荐】 路由效果 在不刷新页面的前提下&#xff0c;根据 URL 中的 hash 值&#xff0c;渲染对应的页面 http://test.com/#/login 登录页http://test.com/#/index 首页 核心API – window.onhashchange 监听 hash 的变化&#xff0c;触发视图更新 window.onhas…

Kali系统开启SSH服务结合内网穿透工具实现无公网IP远程连接

文章目录 1. 启动kali ssh 服务2. kali 安装cpolar 内网穿透3. 配置kali ssh公网地址4. 远程连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 本文主要介绍如何在Kali系统编辑SSH配置文件并结合cpolar内网穿透软件&#xff0c;实现公网环境ssh远程连接本地kali系统。 1. 启…