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>

效果:

相关推荐
牛奶3 小时前
AI辅助开发最佳实践:2026年新方法
前端·aigc·ai编程
Hamm4 小时前
不想花一分钱玩 OpenClaw?来,一起折腾这个!
javascript·人工智能·agent
C澒4 小时前
微前端容器标准化:公共能力标准化
前端·架构
Setsuna_F_Seiei4 小时前
AI 对话应用之 JS 的流式接口数据处理
前端·javascript·ai编程
英俊潇洒美少年4 小时前
react如何实现 vue的$nextTick的效果
javascript·vue.js·react.js
青柠代码录5 小时前
【Vue3】Vue Router 4 路由全解
前端·vue.js
无限大65 小时前
《AI观,观AI》:专栏总结+答疑|吃透核心,解决你用AI的所有困惑
前端·后端
蜡台6 小时前
element-ui 2 el-tree 内容超长滚动条不显示问题
前端·vue.js·elementui·el-tree·v-deep
小小小小宇7 小时前
软键盘常见问题(二)
前端
daols887 小时前
vue甘特图 vxe-gantt 如何实现双击连接线自动删除线功能(含二次确认)
vue.js·甘特图·vxe-gantt