座標驗證
P粉982009874
2023-07-28 09:27:27
<p>我有一個用於坐標的文本字段，我想使用vee-validate（3.x）和Vue 2對其進行驗證。我嘗試了兩種不同的方法，但都沒有成功。座標的格式應該是"整數或浮點數,整數或浮點數"，即"緯度,經度"（只有一個逗號，多個逗號應該被標記為無效）。 </p><p>這是文字欄位：</p><p><br /></p>
<pre class="brush:html;toolbar:false;"><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>
</pre>
<p>這是我嘗試過的兩種方法，但都沒有成功：</p>
<pre class="brush:js;toolbar:false;">extend("coordinates_validation", {
validate: (value) => {
const coordinates = value.split(",");
if (coordinates.length !== 2) {
return false;
}
const trimmedCoordinates = coordinates.map((coord) => coord.trim());
const isValidCoordinate = (coord) => {
return !Number.isNaN(parseFloat(coord)) && Number.isFinite(coord);
};
return (
trimmedCoordinates.every(isValidCoordinate) &&
!trimmedCoordinates.some((coord) => coord === "")
);
},
message: i18n.tc("validations.coordinates_incorrect_format"),
});
</pre>
<pre class="brush:js;toolbar:false;">extend('coordinates_validation', {
validate: (value) => {
const regex = /^d (.d )?,s*d (.d )?$/;
return regex.test(value);
},
message: i18n.tc('validations.coordinates_incorrect_format'),
});
</pre>
<p>有人知道如何解決這個問題嗎？ </p>
當你不確定時，可以透過console.log來查看輸出。
請查看我的codesandbox，我在驗證過程中使用console.log來分步驟地輸出，必要時將大步驟拆分為小步驟。
對於你的第一次嘗試，問題在於Number.isFinite總是會回傳false。這是因為你給它傳遞了一個字串coord，但Number.isFinite期望的是一個數字。修復方法如下：
#你的初始值.split只適用於逗號","。我建議在空格、逗號和逗號 任意數量的空格上進行分割。
#對於你的第二次嘗試，只使用正規表示式，我沒有看到任何問題。我將程式碼放在同一個codesandbox中，並將其用作驗證方法時，它完美地工作。