<p>좌표에 대한 텍스트 필드가 있고 vee-validate(3.x) 및 Vue 2를 사용하여 유효성을 검사하고 싶습니다. 나는 두 가지 다른 방법을 시도했지만 성공하지 못했습니다. 좌표 형식은 "정수 또는 부동 소수점, 정수 또는 부동 소수점", 즉 "위도, 경도"여야 합니다(쉼표는 하나만, 여러 개의 쉼표는 유효하지 않은 것으로 표시해야 함).
텍스트 필드는 다음과 같습니다.
<pre class="brush:html;toolbar:false;"><ValidationProvider v-slot="{ 오류 }" rule="coordinates_validation">
<v-텍스트 필드
:label="$t('stations.position')"
:value="위치값"
:error-messages="오류"
@input="$emit('update:station', { ...station, ...getLatLong($event) })"
@keypress="그냥번호"
/>
</검증 제공자>
</pre>
<p>제가 시도했지만 성공하지 못한 두 가지 방법은 다음과 같습니다.</p>
<pre class="brush:js;toolbar:false;">extend("coordinates_validation", {
검증: (값) =>
const 좌표 = value.split(",");
if (coordinates.length !== 2) {
거짓을 반환;
}
const TrimmedCoordinates = Coord.map((coord) => coord.trim());
const isValidCoordinate = (좌표) =>
return !Number.isNaN(parseFloat(coord)) && Number.isFinite(coord);
};
반품 (
TrimmedCoordinates.every(isValidCoordinate) &&
!trimmedCoordinates.some((coord) => coord === "")
);
},
메시지: i18n.tc("validations.coordinates_incorlect_format"),
});
</pre>
<pre class="brush:js;toolbar:false;">extend('coordinates_validation', {
검증: (값) =>
const 정규식 = /^d+(.d+)?,s*d+(.d+)?$/;
return regex.test(값);
},
메시지: i18n.tc('validations.coordinates_incorlect_format'),
});
</pre>
<p>이 문제를 해결하는 방법을 아는 사람이 있나요? </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
확실하지 않은 경우 console.log를 통해 출력을 확인할 수 있습니다.
내 코드샌드박스를 확인해 주세요. 저는 확인 과정에서 단계별로 출력하기 위해 console.log를 사용하고, 필요할 때 큰 단계를 작은 단계로 나눕니다.
첫 번째 시도에서 문제는 Number.isFinite가 항상 false를 반환한다는 것입니다. 이는 문자열 좌표를 전달했지만 Number.isFinite에서는 숫자를 예상했기 때문입니다. 문제를 해결하는 방법은 다음과 같습니다.
으아악초기값.split은 쉼표 ","에서만 작동합니다. 공백, 쉼표, 쉼표 + 공백 수에 관계없이 분할하는 것이 좋습니다.
으아악두 번째 시도에서는 정규 표현식만 사용해도 아무런 문제가 없습니다. 동일한 코드샌드박스에 코드를 넣고 유효성 검사 방법으로 사용하면 완벽하게 작동합니다.