当前位置: 首页 > 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>

效果:
在这里插入图片描述
在这里插入图片描述

相关文章:

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

vue3ts中判断输入的值是不是经纬度格式 vue代码&#xff1a; <template #bdjhwz"{ record }"><a-row :gutter"8" v-show"!record.editable"><a-col :span"12"><a-input placeholder"经度" v-model:v…...

python常用知识总结

文章目录 1. 常用内置函数1. ASCII码与字符相互转换 1. 常用内置函数 1. ASCII码与字符相互转换 # 用户输入字符 c input("请输入一个字符: ")# 用户输入ASCII码&#xff0c;并将输入的数字转为整型 a int(input("请输入一个ASCII码: "))print( c &qu…...

常用的启发式算法

A算法&#xff1a;在电子地图导航软件中&#xff0c;当你输入目的地时&#xff0c;软件就会利用A算法来计算从现在的位置到目的地的最佳路径。该算法兼顾了路径的优化以及计算速度&#xff0c;保证了结果的准确性以及反馈的实时性。 模拟退火算法&#xff1a;模拟退火算法常被…...

应该如何进行POC测试?—【DBA从入门到实践】第三期

在数据库选型过程中&#xff0c;为确保能够灵活应对数据规模的不断扩大和处理需求的日益复杂化&#xff0c;企业和技术人员会借助POC测试来评估不同数据库系统的性能。在测试过程中&#xff0c;性能、并发处理能力、存储成本以及高可用性等核心要素通常会成为大家关注的焦点&am…...

通过Clojure中的集合与序列谈谈抽象的重要

与君共勉&#xff1a;生命不息&#xff0c;学习不止&#xff0c;切忌浮躁&#xff0c;静下心来&#xff0c;每天进步一点点。 Clojure简介 Clojure是一门运行在JVM上面的Lisp方言&#xff0c;其它的Lisp方言还有Scheme、Common Lisp等。Lisp相关的著名书籍有《计算机程序的构…...

Rust---模式(Pattern)匹配

目录 模式是什么它用来做什么模式匹配和赋值为什么会有模式匹配模式匹配用在什么地方match 表达式if let表达式while let表达式for 循环let 语句函数参数不可驳模式匹配和可驳模式匹配模式是什么 在Rust中,模式(Pattern)是一种用于匹配和解构数据的语法结构。模式匹配中常用…...

MATLAB 计算点投影到平面上的坐标(59)

MATLAB 计算点投影到平面上的坐标(59) 一、算法介绍二、算法实现1.代码2.结果一、算法介绍 点投影到平面,计算投影点的坐标,下面提供MATLAB版本的计算程序,直接运行即可,内有验证数据,具体看代码即可。 二、算法实现 1.代码 代码如下(示例): % 平面上的三个点分…...

2024年MathorCup数学建模B题甲骨文智能识别中原始拓片单字自动分割与识别研究解题文档与程序

2024年第十四届MathorCup高校数学建模挑战赛 B题 甲骨文智能识别中原始拓片单字自动分割与识别研究 原题再现&#xff1a; 甲骨文是我国目前已知的最早成熟的文字系统&#xff0c;它是一种刻在龟甲或兽骨上的古老文字。甲骨文具有极其重要的研究价值&#xff0c;不仅对中国文…...

嵌入式与移动物联网开发教程和案例

一、嵌入式与移动物联网概述 嵌入式系统是指嵌入到设备中的专用计算机系统&#xff0c;用于控制、监视或辅助设备操作。而移动物联网则是指通过物联网技术将各种智能设备与互联网连接起来&#xff0c;实现设备之间的互联互通和智能化管理。嵌入式与移动物联网技术的结合&#…...

AttachVoExample

目录 1、 AttachVoExample 1.1、 GeneratedCriteria 1.2、 addCriterion 1.3、 andFnameGreaterThanOrEqualTo 1.4、 GeneratedCriteria Atta...

图像处理特征提取

图像处理中的特征提取是指从图像数据中提取出具有区分性和代表性的特征&#xff0c;以用于图像分类、目标检测、图像匹配等任务。下面介绍几种常见的图像处理特征提取方法&#xff1a; 颜色特征&#xff1a;颜色是图像中最直观且重要的特征之一。常见的颜色特征提取方法包括颜色…...

前端大屏适配几种方案

一、方案一&#xff1a;remfont-size 动态设置HTML根字体大小和body字体大小&#xff0c;会使用到lib-flexible.js插件lib-flexible.js (function flexible(window, document) {var docEl document.documentElementvar dpr window.devicePixelRatio || 1// adjust body font…...

2011年认证杯SPSSPRO杯数学建模B题(第一阶段)生物多样性的评估全过程文档及程序

2011年认证杯SPSSPRO杯数学建模 B题 生物多样性的评估 原题再现&#xff1a; 2010 年是联合国大会确定的国际生物多样性年。保护地球上的生物多样性已经越来越被人类社会所关注&#xff0c;相关的大规模科研和考察计划也层出不穷。为了更好地建立国际交流与专家间的合作&…...

AcWing 793. 高精度乘法——算法基础课题解

AcWing 793. 高精度乘法 题目描述 给定两个非负整数&#xff08;不含前导 00&#xff09; A 和 B&#xff0c;请你计算 AB 的值。 输入格式 共两行&#xff0c;第一行包含整数 A&#xff0c;第二行包含整数 B。 输出格式 共一行&#xff0c;包含 AB 的值。 数据范围 1≤…...

【一刷《剑指Offer》】面试题 3:二维数组中的查找

力扣对应题目链接&#xff1a;240. 搜索二维矩阵 II - 力扣&#xff08;LeetCode&#xff09; 核心考点&#xff1a;数组相关&#xff0c;特性观察&#xff0c;时间复杂度把握。 一、《剑指Offer》对应内容 二、分析题目 正常查找的过程本质就是排除的过程&#xff0c;谁排除…...

Linux下静态库与动态库使用总结

区别 使用静态库占用的磁盘空间相对比动态库要大。 如果多个可执行程序使用库中同一个函数&#xff0c;那么链接静态库时同一个函数的代码会被复制多份&#xff0c;而链接动态库只复制一份。动态库可共享且版本更新方便 静态链接库在程序编译的时候就被加载进来&#xff0c;不…...

分布式任务调度:架构、原理与实践

引言 在当今快速发展的科技领域中&#xff0c;任务调度作为管理和优化计算资源的重要工具&#xff0c;扮演着至关重要的角色。从单机环境到分布式系统&#xff0c;任务调度的演进不仅跟随着计算机技术的进步&#xff0c;更是为了应对日益复杂的应用场景和需求。本博客将深入探…...

ping命令返回无法访问目标主机和请求超时浅析

在日常经常用ping命令测试网络是否通信正常&#xff0c;使用ping命令时也经常会遇到这两种情况&#xff0c;那么表示网络出现了问题。 1、请求超时的原因 可以看到“请求超时”没有收到任何回复。要知道&#xff0c;IP数据报是有生存时间的&#xff0c;当其生存时间为零时就会…...

地球上的七大洲介绍

地球上的七大洲示意图&#xff1a; 1. 亚洲&#xff08;Asia&#xff09;&#xff1a;世界上最大的洲&#xff0c;面积约为44579000平方公里。亚洲地域辽阔&#xff0c;包括从北极圈到赤道的各种气候和地形。它拥有世界上最多的人口&#xff0c;也是世界上一些最古老文明的发源…...

IntelliJ IDEA 2024 for Mac/Win:引领Java开发新纪元的高效集成环境

在日新月异的软件开发领域&#xff0c;一款高效、智能的集成开发环境&#xff08;IDE&#xff09;无疑是程序员们不可或缺的神兵利器。今天&#xff0c;我要为大家介绍的&#xff0c;正是这样一款集大成之作——IntelliJ IDEA 2024。无论是Mac用户还是Windows用户&#xff0c;只…...

JetBrains IDE试用期重置终极指南:3种简单方法快速延长30天免费使用

JetBrains IDE试用期重置终极指南&#xff1a;3种简单方法快速延长30天免费使用 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter JetBrains IDE试用期重置工具&#xff08;ide-eval-resetter&#xff09;是一款专门…...

Nanbeige像素冒险聊天终端:从start.sh到supervisorctl的完整使用流程

Nanbeige像素冒险聊天终端&#xff1a;从start.sh到supervisorctl的完整使用流程 1. 项目概览与环境准备 Nanbeige 4.1-3B像素冒险聊天终端是一款融合复古游戏美学与AI对话功能的创新工具。这套系统采用Streamlit框架构建&#xff0c;通过精心设计的像素风格界面&#xff0c;…...

Qwen-Image-2512像素艺术生成实操:Gradio界面各参数作用与推荐值

Qwen-Image-2512像素艺术生成实操&#xff1a;Gradio界面各参数作用与推荐值 1. 快速上手像素艺术生成 想创作复古游戏风格的像素画&#xff1f;Qwen-Image-2512结合Pixel Art LoRA的解决方案让你轻松实现。这个服务特别适合游戏开发者、独立艺术家和怀旧风格爱好者&#xff…...

Qwen3-VL-2B-Instruct保姆级教程:视觉对话机器人部署

Qwen3-VL-2B-Instruct保姆级教程&#xff1a;视觉对话机器人部署 1. 环境准备与快速部署 想要体验AI视觉对话的神奇能力吗&#xff1f;Qwen3-VL-2B-Instruct让你不用昂贵的显卡也能拥有一个能"看懂"图片的智能助手。这个教程将手把手带你完成整个部署过程&#xff…...

Git【企业级开发模型】

一、为什么需要企业级开发模型&#xff1f; 一个软件从零开始到最终交付&#xff0c;大致需要经历&#xff1a;规划 → 编码 → 构建 → 测试 → 发布 → 部署 → 维护。在个人项目中&#xff0c;你一个人可以完成所有环节。但在企业中&#xff0c;角色分工明确&#xff1a; 开…...

Qwen3.5-9B训练复现:从SFT到RLHF的全流程开源实践指南

Qwen3.5-9B训练复现&#xff1a;从SFT到RLHF的全流程开源实践指南 1. 项目概述 Qwen3.5-9B是一个拥有90亿参数的开源大语言模型&#xff0c;具备强大的逻辑推理、代码生成和多轮对话能力。该模型支持多模态理解&#xff08;图文输入&#xff09;和长上下文处理&#xff08;最…...

AST 是什么?费曼 + 大白话 + 画图,30 秒彻底懂

我用最简单、最形象、最不绕弯的方式给你讲清楚&#xff0c;保证你马上能听懂&#x1f447;一、AST 代码的骨架结构图全称&#xff1a;Abstract Syntax Tree 抽象语法树一句话&#xff1a;AST 就是把代码拆成逻辑结构&#xff0c;去掉所有标点、空格、格式&#xff0c;只保留 …...

基于Cortex-M3和步进电机的数字钟控制及其语音播报系统设计

一、系统概述 系统以Cortex-M3内核单片机&#xff08;如STM32F103C8T6&#xff09;为核心&#xff0c;融合步进电机精密驱动、实时时钟&#xff08;RTC&#xff09;、语音合成播报三大功能&#xff0c;实现“数字钟精准显示机械指针动态指示定时语音报时”的一体化设计。系统通…...

MCP协议实战:用npx免安装部署文件系统服务的完整指南

MCP协议实战&#xff1a;用npx免安装部署文件系统服务的完整指南 在当今快速迭代的开发环境中&#xff0c;如何高效部署和管理文件系统服务成为许多开发者面临的挑战。传统方式往往需要全局安装各种工具包&#xff0c;不仅占用系统资源&#xff0c;还可能引发版本冲突。本文将带…...

如何通过智慧树自动化学习助手解决网课学习效率问题

如何通过智慧树自动化学习助手解决网课学习效率问题 【免费下载链接】zhihuishu 智慧树刷课插件&#xff0c;自动播放下一集、1.5倍速度、无声 项目地址: https://gitcode.com/gh_mirrors/zh/zhihuishu 副标题&#xff1a;面向时间紧张学习者的智能网课辅助工具 一、价…...