<p>座標のテキスト フィールドがあり、vee-validate (3.x) と Vue 2 を使用して検証したいと考えています。 2 つの異なる方法を試しましたが、成功しませんでした。座標の形式は、「整数または浮動小数点、整数または浮動小数点数」、つまり「緯度、経度」である必要があります（カンマは 1 つだけ、複数のカンマは無効としてマークする必要があります）。 </p><p>これはテキスト フィールドです: </p><p><br /></p>
<pre class="brush:html;toolbar:false;"><ValidationProvider v-slot="{ エラー }" rules="座標検証">
</ValidationProvider>
</pre>
<p>私が試してみたが成功しなかったことが 2 つあります: </p>
<pre class="brush:js;toolbar:false;">extend("座標検証", {
検証: (値) => {
const 座標 = value.split(",");
if (座標.長さ !== 2) {
false を返します。
}
constrimmedCoordines = 座標.map((coord) => coord.trim());
const isValidCoowned = (座標) => {
return !Number.isNaN(parseFloat(coord)) && Number.isFinite(coord);
};
戻る （
TrimmedCoowned.every(isValidCooperative) &&
!trimmedCoowned.some((coord) => coord === "")
);
}、
メッセージ: i18n.tc("validations.coowned_incorrect_format"),
});
</pre>
<pre class="brush:js;toolbar:false;">extend('座標_検証', {
検証: (値) => {
const regex = /^d (.d )?,s*d (.d )?$/;
regex.test(値)を返します;
}、
メッセージ: i18n.tc('validations.coowned_incorrect_format'),
});
</pre>
<p>これを修正する方法を知っている人はいますか? </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
不明な場合は、console.log を通じて出力を確認できます。
コードサンドボックスを確認してください。検証プロセス中に console.log を使用してステップごとに出力し、必要に応じて大きなステップを小さなステップに分割します。
最初の試行では、問題は Number.isFinite が常に false を返すことです。これは、文字列 coord を渡しましたが、Number.isFinite は数値を予期していたためです。修正方法は次のとおりです:
リーリー初期値.split はカンマ「,」でのみ機能します。スペース、カンマ、または任意の数のスペースで分割することをお勧めします。
リーリー2 回目の試行では、正規表現を使用するだけですが、問題はありません。コードを同じコードサンドボックスに入れて検証メソッドとして使用すると、完全に機能します。