经纬度输入校验规则

简介: 经纬度输入校验规则

简单整理下经纬度(-180,180)-(-90,90)的校验规则

        <el-col :span="3">
            经度:
            <el-input
              v-model="lng"
              placeholder="请输入经度"
              size="mini"
              style="width: 120px"
              type="number"
              @input="handleEdit"
              @change="searchpointWindProfile"
            ></el-input>
          </el-col>
    // 正则验证经纬度
    handleEdit(e) {
      let value = e.replace(/[^\-\d.]/g, ""); // 只能输入.和-和数字
      value = value.replace(/^\./g, ""); // 第一个字符不能是.
      value = value.replace(/\.{2,}/g, "."); // 不能连续输入.
      value = value.replace(/(\.\d+)\./g, "$1"); // .后面不能再输入.
      value = value.replace(/(-)\./g, "$1"); // -后面不能输入.
      value = value.replace(/\-{2,}/g, "-"); // -只能保留一个
      value = value.replace(/(\d+|\.)-/g, "$1"); // 数字和.后面不能接-,不能出现类似11-, 12.-
      value = value.replace(/-(0){2,}/g, "$1"); // 不能出现-00,-001,-0001类似
      value = value.replace(/(-)0+(\d+)/g, "$1$2"); // 不能出现-01,-02类似
      value = value.replace(/^0+(\d)/, "$1"); // 第一位0开头,0后面为数字,则过滤掉,取后面的数字
      value = value.replace(/(\d{3})\d*/, "$1"); // 最多保留15位整数
      value = value.replace(/(\.\d{3})\d*/, "$1"); // 最多保留2位小数
      if (parseInt(value) > 180) {
        value = 180;
      } else if (parseInt(value) < -180) {
        value = -180;
      }
      this.lng = value;
    },

我是小丁,

祝你牛逼

相关文章
|
定位技术
最完整的经纬度正则表达式
最完整的就是最好的 ----经纬度
16007 0
|
JavaScript 数据可视化
基于fabric.js的图片编辑器, 画布背景实现原理
基于vue3 + fabric.js + vite + element-plus + typescript等技术,画布背景原理分析
基于fabric.js的图片编辑器, 画布背景实现原理
|
负载均衡 Ubuntu 应用服务中间件
|
容器
layui框架实战案例(14):tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
layui框架实战案例(14):tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
542 0
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
【RuoYi-SpringBoot3-Pro】:拒绝“大众脸”!高颜值前端框架选型
拒绝“若依脸”!推荐两款高颜值前端框架:BearJia Vue3(Ant Design Vue 4 + Vite)打造专业现代界面,RuoYi-Vue3-Prettier 全面重构Element Plus,支持TS与Hook封装。视觉升级、代码精简,助你轻松实现差异化后台系统。
215 1
【RuoYi-SpringBoot3-Pro】:拒绝“大众脸”!高颜值前端框架选型
|
SQL 缓存 监控
SpringBoot整合阿里巴巴Druid数据源
Java程序很大一部分要操作数据库,为了提高性能操作数据库的时候,又不得不使用数据库连接池。 Druid 是阿里巴巴开源平台上一个数据库连接池实现,结合了 C3P0、DBCP 等 DB 池的优点,同时加入了日志监控。 Druid 可以很好的监控 DB 池连接和 SQL 的执行情况,天生就是针对监控而生的 DB 连接池。 本文主要讲解如何整合Druid数据源及Druid常用配置项和详解
6082 1
SpringBoot整合阿里巴巴Druid数据源
|
API 开发者 数据格式
孔夫子API接口关键词获取
孔夫子旧书网提供API接口,通过关键词获取在售商品信息,包括注册开发者账号、创建应用、获取API密钥等步骤。API文档详细列出参数、请求方式和返回数据格式,并提供Python调用示例。此外,孔子的教育思想强调素质教育、道德教育和教育平等,对当代教育有重要影响。
|
数据可视化 定位技术
【threejs】可视化大屏酷炫3D地图附源码
【threejs】可视化大屏酷炫3D地图附源码
12213 131
【threejs】可视化大屏酷炫3D地图附源码
|
网络协议 Windows
电脑ip在哪里查看?windows系统查看ip地址的8种方法
在Windows系统中,有多种方法可以查看电脑的IP地址。
8140 2
|
JavaScript
vue中router页面之间参数传递,params失效,建议使用query
vue中router页面之间参数传递,params失效,建议使用query
858 0

热门文章

最新文章