座標検証

Question

<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>

Answer 1

不明な場合は、console.log を通じて出力を確認できます。

コードサンドボックスを確認してください。検証プロセス中に console.log を使用してステップごとに出力し、必要に応じて大きなステップを小さなステップに分割します。

最初の試行では、問題は Number.isFinite が常に false を返すことです。これは、文字列 coord を渡しましたが、Number.isFinite は数値を予期していたためです。修正方法は次のとおりです:

リーリー

初期値.split はカンマ「,」でのみ機能します。スペース、カンマ、または任意の数のスペースで分割することをお勧めします。

リーリー

2 回目の試行では、正規表現を使用するだけですが、問題はありません。コードを同じコードサンドボックスに入れて検証メソッドとして使用すると、完全に機能します。