Vérification des coordonnées
P粉982009874
P粉982009874 2023-07-28 09:27:27
0
1
547
<p>J'ai un champ de texte pour les coordonnées et je souhaite le valider à l'aide de vee-validate (3.x) et Vue 2. J'ai essayé deux méthodes différentes sans succès. Le format des coordonnées doit être "entier ou flottant, entier ou flottant", c'est-à-dire "latitude, longitude" (une seule virgule, plusieurs virgules doivent être marquées comme invalides). </p><p>Voici le champ de texte : </p><p><br /></p> <pre class="brush:html;toolbar:false;"><ValidationProvider v-slot="{ erreurs }" règles="coordonnées_validation"> <v-champ-texte :label="$t('stations.position')" :value="positionValeur" :error-messages="erreurs" @input="$emit('update:station', { ...station, ...getLatLong($event) })" @keypress="justeNuméro" /> </ValidationProvider> ≪/pré> <p>Voici deux choses que j'ai essayées sans succès : </p> <pre class="brush:js;toolbar:false;">extend("coordonnées_validation", { valider : (valeur) => coordonnées const = value.split(","); if (coordonnées.longueur !== 2) { renvoie faux ; } const trimmedCoordonnées = coordonnées.map((coord) => coord.trim()); const isValidCoordonnée = (coord) => return !Number.isNaN(parseFloat(coord)) && } ; retour ( trimmedCoordonnées.every(isValidCoordonnée) && !trimmedCoordonnées.some((coord) => coord === "") ); }, message : i18n.tc("validations.coordonnées_incorrect_format"), }); ≪/pré> <pre class="brush:js;toolbar:false;">extend('coordonnées_validation', { valider : (valeur) => const regex = /^d+(.d+)?,s*d+(.d+)?$/; return regex.test(valeur); }, message : i18n.tc('validations.coordonnées_incorrect_format'), }); ≪/pré> <p>Est-ce que quelqu'un sait comment résoudre ce problème ? </p>
P粉982009874
P粉982009874

répondre à tous(1)
P粉682987577

En cas de doute, vous pouvez vérifier le résultat via console.log.

Veuillez vérifier mes codes et ma boîte, j'utilise console.log pour afficher étape par étape pendant le processus de vérification, en divisant les grandes étapes en petites étapes si nécessaire.

Pour votre premier essai, le problème est que Number.isFinite renvoie toujours false. C'est parce que vous lui avez transmis une coordonnée de chaîne, mais Number.isFinite attendait un nombre. Voici comment y remédier :

Number.isFinite(parseFloat(coord))

Votre valeur initiale.split ne fonctionne qu'avec des virgules ",". Je recommande de diviser en espaces, virgules et virgules + n'importe quel nombre d'espaces.

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

Pour votre deuxième tentative, en utilisant uniquement des expressions régulières, je ne vois aucun problème. Lorsque je mets le code dans la même boîte à codes et que je l'utilise comme méthode de validation, cela fonctionne parfaitement.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal