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>

效果:

相关推荐
kymjs张涛11 分钟前
零一开源|前沿技术周刊 #15
前端·javascript·面试
Artea12 分钟前
聊聊 Vue3 的泛型
vue.js
BYSJMG12 分钟前
计算机毕业设计选题:基于Spark+Hadoop的健康饮食营养数据分析系统【源码+文档+调试】
大数据·vue.js·hadoop·分布式·spark·django·课程设计
reacx12 分钟前
# 第三章:状态管理架构设计 - 从 Zustand 到 React Query 的完整实践
前端
古夕13 分钟前
Vue3 + vue-query 的重复请求问题解决记录
前端·javascript·vue.js
不知名程序员第二部14 分钟前
前端-业务-架构
前端·javascript·代码规范
Bug生产工厂14 分钟前
React支付组件设计与封装:从基础组件到企业级解决方案
前端·react.js·typescript
小喷友14 分钟前
阶段三:进阶(Rust 高级特性)
前端·rust
华仔啊15 分钟前
面试官:请解释一下 JS 的 this 指向。别慌,看完这篇让你对答如流!
前端·javascript
Strayer15 分钟前
Tauri2.0打包构建报错
前端