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

news2024/11/28 18:51:59

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.coloradmin.cn/o/1599228.html

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

相关文章

CookieSession

目录 什么是会话 一.Cookie 1.Cookie介绍 2.Cookie的作用 3.Cookie的基本使用 4.Cookie生命周期 5.Cookie有效路径 6.注意事项 二.Session 1.Session基本原理 2 Session的作用 3.Session的基本使用 4.Session底层实现机制 5.Session生命周期 什么是会话 Cookie和S…

C++从入门到精通——类的6个默认成员函数之赋值运算符重载

赋值运算符重载 前言一、运算符重载定义实例注意要点 二、赋值运算符重载赋值运算符重载格式赋值运算符重载要点重载要点传值返回和传址返回要点 三、前置和后置重载 前言 类的6个默认成员函数&#xff1a;如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么…

Cloudflare Workers 付费文档

定价 默认情况下&#xff0c;用户可以访问Workers免费计划。Workers免费计划包括对Workers、Pages Functions和Workers KV的有限使用。了解更多关于免费计划限制的信息。 Workers付费计划包括Workers、Pages Functions、Workers KV和Durable Objects的使用&#xff0c;每个账…

移植speexdsp到OpenHarmony标准系统②

在linux上生成speexdsp的so动态链接库和.a静态链接库 make和make install后会生成speexdsp的.so动态链接库和.a静态链接库 make make install其中build/lib目录下&#xff1a; ├── libspeexdsp.a /*静态库*/ ├── libspeexdsp.la …

基于Springboot+Vue的Java项目-免税商品优选购物商城系统开发实战(附演示视频+源码+LW)

大家好&#xff01;我是程序员一帆&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &am…

MySQL 列数据跨表拷贝,一句SQL快速将表A每条记录的某些字段拷贝到表B每条记录的某些字段(A、B表通过ID对应)

文章目录 MySQL 列数据跨表拷贝&#xff0c;一句SQL快速将表A每条记录的某些字段拷贝到表B每条记录的某些字段&#xff08;A、B表通过ID对应&#xff09;背景定义表填充测试数据跨表一 一对应拷贝列数据SQL参考资料 MySQL 列数据跨表拷贝&#xff0c;一句SQL快速将表A每条记录的…

创建影子用户

文章目录 1.认识影子用户2.创建隐藏账户并加入管理员组3.修改注册表3.删除用户4.添加管理员权限 1.认识影子用户 影子用户通常指的是那些在系统用户列表中不可见&#xff0c;但在某些情况下可以进行操作的用户。在内网渗透过程中&#xff0c;当我们拿到shell时&#xff0c;肯定…

某小学AK,SK泄露导致横向到云主机控制台

目录 前言 免责声明 分享声明 个人介绍 某小学AK&#xff0c;SK泄露导致横向到云主机控制台 一、 资产证明 资产证明(1) 资产证明(2) 二、漏洞利用过程 三、漏洞危害 四、修复建议 五、预防措施 前言 免责声明 以下漏洞均已经上报漏洞平台。请勿利用文章内的相关…

Android Jetpack学习系列——Room

关于Room&#xff1a; Room是Android Jetpack组件之一&#xff0c;旨在为Android应用程序提供一种简单、强大且易于使用的本地数据库访问解决方案。 关键特性&#xff1a; 1.基于SQLite封装&#xff1a;Room是基于SQLite数据库引擎构建的&#xff0c;提供了面向对象的API来与…

拉普拉斯金字塔的频谱分析

1. 基本分析 拉普拉斯金字塔分解&#xff0c;主要由以下步骤组成&#xff1a; 对输入图像 L0 进行低通滤波&#xff0c;其中常采用高斯滤波&#xff1b;对低通滤波后的图像进行 1/2 倍率的下采样&#xff0c;这里的下采样通常是指直接取偶行且偶列&#xff08;以 0 开始计&am…

Linux安装部署Tomcat

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ Linux安装部署Tomcat //将tomcat压缩包解压到对…

【计算机网络】常用编码方式+例题(曼彻斯特编码、差分曼彻斯特编码...)

常用编码方式例题 常用编码方式练习画出四种编码20221题342015题342013题34 常用编码方式 练习 画出四种编码 20221题34 这个题目的考察是差分曼彻斯特编码。 差分曼彻斯特编码在每个码元的中间时刻电平都会发生跳变。与曼彻斯特编码不同的是&#xff1a;电平的跳变仅代表时钟…

4G/5G布控球/移动执法仪/智能单兵电力巡检远程视频智能监控方案

一、背景与需求 随着科技的不断进步&#xff0c;视频监控技术已成为电力行业不可或缺的一环。电力行业的巡检及建设工作&#xff0c;因施工现场在人迹罕见的野外或山区&#xff0c;地形复杂多变&#xff0c;安全更是重中之重&#xff0c;现场工作的视频图像需实时传回监管中心…

SpringCloud、SpringBoot、JDK版本对应关系

SpringCloud与SpringBoot 版本 官网说明&#xff1a;https://spring.io/projects/spring-cloud#overview SpringBoot 与 JDK版本关系 发布说明&#xff1a;https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-3.0-Release-Notes SpringBoot 3.x不再支持JDK1.…

[leetcode] 54. 螺旋矩阵

文章目录 题目描述解题方法模拟java代码复杂度分析 相似题目 题目描述 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;…

每日两题 / 15. 三数之和 73. 矩阵置零(LeetCode热题100)

15. 三数之和 - 力扣&#xff08;LeetCode&#xff09; 先确定一个数t&#xff0c;对于剩下的两个数&#xff0c;要求两数之和为t的负数 三数之和就退化成了两数之和&#xff0c;两数之和可以用双指针 先排序&#xff0c;左右两个指针&#xff0c;指向的数之和大于目标值&…

PCB裸板如何测试?当然是这些....

在印刷电路板制造中&#xff0c;可能会遇见裸板测试&#xff08;主要用于监测PCB在生产过程中可能出现的缺陷&#xff0c;如开路、短路、错位等&#xff0c;以此确保后续装配和使用的顺利进行&#xff09;。本文将介绍几种常用的PCB裸板测试方案&#xff0c;希望对小伙伴们有所…

AD高速板设计(笔记)

Alt左键高亮某个器件或属性&#xff0c;点击任意位置取消高亮。 TP设置旋转角度为45度&#xff0c;即可选中器件按空格旋转时候每次旋转45度。 先画出想要割槽的区域&#xff0c;选中之后TVB即可开槽。 左右翻转电路板&#xff1a;VB DR打开规则设置 UFO对器件进行扇出&#…

LangChain入门:20.探索使用 Self-Ask with Search 代理

引言 在信息爆炸的时代&#xff0c;准确快速地找到事实性问题的答案变得尤为重要。LangChain的Self-Ask with Search代理&#xff08;SELF_ASK_WITH_SEARCH&#xff09;正是为了解决这一挑战而生。本文将深入探讨这一代理的工作原理&#xff0c;并通过实例演示其如何巧妙地处理…

【六】fastapi+vue前后端分离项目

前端代码 https://gitee.com/feiminjie/helloworldfront 后端代码 https://gitee.com/feiminjie/helloworld 整体效果 首页 用例管理页 用例详情页