经纬度输入校验规则

最新推荐文章于 2024-05-13 10:45:54 发布

前端的路人丁

最新推荐文章于 2024-05-13 10:45:54 发布

阅读量1.4k

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/yinzisang/article/details/127389800

版权

经纬度校验规则正则表达式 Vue组件输入限制

关键词由CSDN通过智能技术生成

简单整理下经纬度（-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;
    },

我是小丁，

祝你牛逼