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

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

vue代码:

html 复制代码
<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代码:

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>

效果:

相关推荐
KaMeidebaby1 小时前
卡梅德生物技术快报|骆驼纳米抗体:从原核表达、高通量测序到分子对接全流程实现
前端·数据库·其他·百度·新浪微博
子兮曰3 小时前
Node.js v26.1.0 深度解读:FFI、后量子密码与调试器的进化
前端·后端·node.js
测试员周周3 小时前
【Appium 系列】第06节-页面对象实现 — LoginPage 实战
开发语言·前端·人工智能·python·功能测试·appium·测试用例
西洼工作室5 小时前
前端直传OSS服务端签名(Policy+Signature)/STS临时凭证
前端·文件上传·oss
你很易烊千玺5 小时前
日常练习-数组 字符串常用的场景
前端·javascript·字符串·数组
weixin199701080166 小时前
[特殊字符] RESTful API 接口规范详解:构建高效、可扩展的 Web 服务(附 Python 源码)
前端·python·restful
存在的五月雨6 小时前
Vue3项目一些语法
前端·javascript·react.js
nashane6 小时前
HarmonyOS 6学习:Web组件同层渲染事件处理与智能长截图实现
前端·学习·harmonyos·harmonyos 5
大家的林语冰7 小时前
Node 2026 发布,JS 三大新功能上线,最后一个奇偶版本
前端·javascript·node.js