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

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.lryc.cn/news/338605.html

相关文章:

  • python常用知识总结
  • 常用的启发式算法
  • 应该如何进行POC测试?—【DBA从入门到实践】第三期
  • 通过Clojure中的集合与序列谈谈抽象的重要
  • Rust---模式(Pattern)匹配
  • MATLAB 计算点投影到平面上的坐标(59)
  • 2024年MathorCup数学建模B题甲骨文智能识别中原始拓片单字自动分割与识别研究解题文档与程序
  • 嵌入式与移动物联网开发教程和案例
  • AttachVoExample
  • 图像处理特征提取
  • 前端大屏适配几种方案
  • 2011年认证杯SPSSPRO杯数学建模B题(第一阶段)生物多样性的评估全过程文档及程序
  • AcWing 793. 高精度乘法——算法基础课题解
  • 【一刷《剑指Offer》】面试题 3:二维数组中的查找
  • Linux下静态库与动态库使用总结
  • 分布式任务调度:架构、原理与实践
  • ping命令返回无法访问目标主机和请求超时浅析
  • 地球上的七大洲介绍
  • IntelliJ IDEA 2024 for Mac/Win:引领Java开发新纪元的高效集成环境
  • Java 中命令模式,请用代码具体举例
  • 低延时+高并发+强事务丨DolphinDB 交易型内存存储引擎 IMOLTP 使用指南
  • 写代码的修养
  • springboot 问题整合
  • UNIAPP二维码展示页亮度调至最亮返回恢复进入前亮度
  • Golang ProtoBuf 初学者完整教程:安装
  • Isolation Forest 简介
  • Java爬虫携带sign签名
  • 设计者模式之中介者模式(下)
  • SAP SD学习笔记04 - 出荷Plant(交货工厂),出荷Point(装运点),输送计划,品目的可用性检查,一括纳入/分割纳入,仓库管理
  • bind包装器——C++新特性(三)