如何在 Vee-validate 3.0 中验证 URL？答案

【问题标题】：How to validate a URL in Vee-validate 3.0?如何在 Vee-validate 3.0 中验证 URL？
【发布时间】：2020-02-09 00:21:50
【问题描述】：

我找不到验证 URL 的选项了。

实现它或将其添加到 vee-validate 3.0 的最佳方法是什么？

我想我必须扩展当前的 vee-validate：

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 的最佳方式是什么？
为什么删除了这么有用的功能？

【问题讨论】：

标签： vuejs2 vee-validate

【解决方案1】：

@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"/>

【讨论】：

【解决方案2】：

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

Document Link

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>

【讨论】：

您不能根据文档在正则表达式中使用管道 (|)，但这可以通过某种方式工作！