针对复杂形式的检验需求，配合element-ui让el-form轻松校验经纬度！

1.1 校验经度

1. 校验经度的正则表达式：

/^(-?\d+(\.\d+)?),\s*(\d+(\.\d+)?)$/

2. 在vue项目中的data下面，return{}的上方，书写位置如图：

data() {
    return {
      form: {
        longitude: ''
      },
      rules: {
        longitude: [
          { required: true, message: '请输入经度', trigger: 'blur' },
          { pattern: /^(-?\d+(\.\d+)?),\s*(\d+(\.\d+)?)$/, message: '请输入正确的经度', trigger: 'blur' }
        ]
      }
    }
  },

1.2 校验纬度

1. 校验纬度的正则表达式：

/^(-?\d+(\.\d+)?),\s*(\d+(\.\d+)?)$/

2. 在vue项目中的data下面，return{}的上方，书写位置如图：

data() {
    return {
      form: {
        latitude: ''
      },
      rules: {
        latitude: [
          { required: true, message: '请输入纬度', trigger: 'blur' },
          { pattern: /^(-?\d+(\.\d+)?),\s*(\d+(\.\d+)?)$/, message: '请输入正确的纬度', trigger: 'blur' }
        ]
      }
    }
  },

2. 配合element-ui中的form表单rules验证一起使用

<el-form :model="form" :rules="rules" ref="form">
  <el-form-item label="经度" prop="longitude">
    <el-input v-model="form.longitude"></el-input>
  </el-form-item>
  <el-form-item label="纬度" prop="latitude">
    <el-input v-model="form.latitude"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('form')">提交</el-button>
  </el-form-item>
</el-form>

PS：需要设置的规则

methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 执行提交操作
        } else {
          // 执行其他操作
        }
      });
    },
  },