坐标验证
P粉982009874
P粉982009874 2023-07-28 09:27:27
[Vue.js讨论组]

我有一个用于坐标的文本字段,我想使用vee-validate(3.x)和Vue 2对其进行验证。我尝试了两种不同的方法,但都没有成功。坐标的格式应该是"整数或浮点数,整数或浮点数",即"纬度,经度"(只有一个逗号,多个逗号应该被标记为无效)。

这是文本字段:


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

这是我尝试过的两种方法,但都没有成功:

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"),
});
extend('coordinates_validation', {
  validate: (value) => {
    const regex = /^d+(.d+)?,s*d+(.d+)?$/;
    return regex.test(value);
  },
  message: i18n.tc('validations.coordinates_incorrect_format'),
});

有人知道如何解决这个问题吗?

P粉982009874
P粉982009874

全部回复(1)
P粉682987577

当你不确定时,可以通过console.log来查看输出。

请查看我的codesandbox,我在验证过程中使用console.log来分步骤地输出,必要时将大步骤拆分为小步骤。

对于你的第一次尝试,问题在于Number.isFinite始终返回false。这是因为你给它传递了一个字符串coord,但Number.isFinite期望的是一个数字。修复方法如下:

Number.isFinite(parseFloat(coord))

你的初始值.split仅适用于逗号","。我建议在空格、逗号和逗号+任意数量的空格上进行分割。

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

对于你的第二次尝试,只使用正则表达式,我没有看到任何问题。我将代码放在同一个codesandbox中,并将其用作验证方法时,它完美地工作。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号