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>

效果:

相关推荐
老华带你飞1 小时前
电影购票|基于java+ vue电影购票系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
老华带你飞1 小时前
宠物管理|基于java+ vue宠物管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·宠物
Irene19911 小时前
Vue 3 中的内置指令:v-memo
vue.js·v-memo
释怀不想释怀3 小时前
Ajax,vue生命周期(自动加载页面发出请求)Axios
前端·javascript·ajax
一点晖光3 小时前
ios底部按钮被挡住
前端·ios·微信小程序
VX:Fegn08953 小时前
计算机毕业设计|基于springboot + vue智慧医药系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·课程设计
cz追天之路9 小时前
华为机考--- 字符串最后一个单词的长度
javascript·css·华为·less
Light609 小时前
CSS逻辑革命:原生if()函数如何重塑我们的样式编写思维
前端·css·响应式设计·组件化开发·css if函数·声明式ui·现代css
蜡笔小嘟9 小时前
宝塔安装dify,更新最新版本--代码版
前端·ai编程·dify
Irene199110 小时前
Vue:useSlots 和 useAttrs 深度解析
vue.js·useslots·useattrs