vue 正则验证坐标经度、纬度_vue3 经纬度校验-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35952203/article/details/119725405

该博客内容涉及经纬度的验证规则实现，包括经度和纬度的正则表达式校验，确保输入值符合0-180和0-90的范围，并精确到15位小数。同时，展示了在前端表单中使用这些验证规则的组件示例，如A-Input，通过v-model绑定数据并设置blur和change触发的验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在data上设置

data () {
      const validateLongitude = (rule, value, callback) => {
        //经度,整数部分为0-180小数部分为0到15位
        var longreg = /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,15})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,15}|180)$/
        if (!longreg.test(value)) {
          callback(new Error('经度整数部分为0-180,小数部分为0到15位!'))
        }
        callback()
      }
      const validateLatitude = (rule, value, callback) => {
        //纬度,整数部分为0-90小数部分为0到15位
        var latreg = /^(\-|\+)?([0-8]?\d{1}\.\d{0,15}|90\.0{0,15}|[0-8]?\d{1}|90)$/
        if (!latreg.test(value)) {
          callback(new Error('纬度整数部分为0-90,小数部分为0到15位!'))
        }
        callback()
      }
      return {
        validatorRules: {
          longitude: [
            { validator: validateLongitude, trigger: 'blur' },
            { validator: validateLongitude, trigger: 'change' }
          ],
          dimension: [
            { validator: validateLatitude, trigger: 'blur' },
            { validator: validateLatitude, trigger: 'change' }
          ]
        }

      }
    },

<a-col :span="24">
            <a-form-model-item label="经度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="longitude">
              <a-input v-model="model.longitude" placeholder="请输入经度"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="纬度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dimension">
              <a-input v-model="model.dimension" placeholder="请输入纬度"  ></a-input>
            </a-form-model-item>
          </a-col>