Vuejs2 如何在Vee validate 3.0中验证URL？

我再也找不到验证URL的选项了

实现它或将它添加到vee validate 3.0的最佳方式是什么

我想我必须扩展当前的vee验证：

import { ValidationObserver, ValidationProvider, localize, extend as VeeExtend } from 'vee-validate/dist/vee-validate.full';

然后像

const urlFixRule = (value) => {
  var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
    '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
    '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
    '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
  return !!pattern.test(value);
};
VeeExtend('url', {
    validate: (val) => urlFixRule(val),
    message: i18n.t('custom_vee_validate.incorrect_url')
});

• 验证URL的最佳方法是什么
• 为什么删除了如此有用的功能

---

Vee Validate有regex规则，正如您所知，大多数验证都是通过定期过期创建的。因此，您可以轻松创建所需的规则，而无需扩展

URL验证示例：

<ValidationProvider :rules="{ regex: /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/ }" v-slot="{ errors }">
    <input type="text" v-model="value">
    <span>{{ errors[0] }}</span>
</ValidationProvider>

{{错误[0]}
@mojtaba的答案完全正确。因此，我们可以改进他的答案，添加全球可用的规则。这将允许在应用程序中的任何位置重复使用该规则

import { extend } from "vee-validate";

extend('url', {
  validate(value: string | null | undefined): boolean {
    if (value) {
      return /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/.test(value);
    }

    return false;
  },
  message: 'This value must be a valid URL',
})

然后，在我们的组件中，我们可以简单地执行以下操作：

<input rules="url"/>


根据文档，您不能在regex中使用管道（|），但这是可行的！