Koordinatenüberprüfung

Question

Ich habe ein Textfeld für Koordinaten und möchte es mit vee-validate (3.x) und Vue 2 validieren. Ich habe zwei verschiedene Methoden ausprobiert, ohne Erfolg. Das Format der Koordinaten sollte „Integer oder Float, Integer oder Float“ sein, also „Breitengrad, Längengrad“ (nur ein Komma, mehrere Kommas sollten als ungültig markiert werden).

Dies ist das Textfeld:

<ValidationProvider v-slot="{errors }" Rules="coordinates_validation">
            <v-text-field
              :label="$t('stations.position')"
              :value="positionValue"
              :error-messages="errors"
              @input="$emit('update:station', { ...station, ...getLatLong($event) })"
              @keypress="justNumber"
            />
</ValidationProvider>

Hier sind zwei Dinge, die ich erfolglos versucht habe:

extend("coordinates_validation", {
  validieren: (Wert) =>
    const Koordinaten = value.split(",");

    if (Koordinaten.Länge !== 2) {
      falsch zurückgeben;
    }

    const trimmedCoordinates = Koordinaten.map((coord) => coord.trim());

    const isValidCoordinate = (coord) =>
      return !Number.isNaN(parseFloat(coord)) &&
    };

    zurückkehren (
      trimmedCoordinates.every(isValidCoordinate) &&
      !trimmedCoordinates.some((coord) => coord === "")
    );
  },
  Nachricht: i18n.tc("validations.coordinates_incorrect_format"),
});

extend('coordinates_validation', {
  validieren: (Wert) =>
    const regex = /^d+(.d+)?,s*d+(.d+)?$/;
    return regex.test(value);
  },
  Nachricht: i18n.tc('validations.coordinates_incorrect_format'),
});

Weiß jemand, wie man das beheben kann?

Answer 1

当你不确定时，可以通过console.log来查看输出。

请查看我的codesandbox，我在验证过程中使用console.log来分步骤地输出，必要时将大步骤拆分为小步骤。

对于你的第一次尝试，问题在于Number.isFinite始终返回false。这是因为你给它传递了一个字符串coord，但Number.isFinite期望的是一个数字。修复方法如下：

Number.isFinite(parseFloat(coord))

你的初始值.split仅适用于逗号","。我建议在空格、逗号和逗号+任意数量的空格上进行分割。

const coordinates = value.split(/[,\s]\s*/);

对于你的第二次尝试，只使用正则表达式，我没有看到任何问题。我将代码放在同一个codesandbox中，并将其用作验证方法时，它完美地工作。