Vue Vee-validate 将有效 URL 标记为无效答案

【问题标题】：Vue Vee-validate marking valid URLs as invalidVue Vee-validate 将有效 URL 标记为无效
【发布时间】：2018-04-02 03:57:22
【问题描述】：

对于我的 Vuejs 应用程序，我使用 Vee-validate 进行验证。目前它正在将有效的 URL（如 http://localhost:3000）标记为无效。

这也发生在他们的样本上： http://vee-validate.logaretm.com/rules.html#rule-url

如果您在他们的示例中输入http://localhost:3000，您将看到消息The field field is not a valid URL.

【问题讨论】：

标签： javascript vue.js vuejs2 vee-validate

【解决方案1】：

经过搜索，我在Vee-validate's Github上找到了一些相关的问题，但没有一个能完全解决我的问题。为了验证本地主机 URL，我必须执行以下操作：

添加验证器包
```
npm install validator
```

添加新规则：

const urlFixRule = (value) => {
    return isURL(value, {
        require_tld: false
    });
};

应用新规则：

VeeValidate.Validator.extend('url', urlFixRule);

它在我的 js 文件中的样子

import Vue from 'vue';
import isURL from 'validator/lib/isURL';
import VeeValidate from 'vee-validate';
import App from './App';

// Form Validation (https://github.com/baianat/vee-validate)
Vue.use(VeeValidate);

// Temporary Fix for Vee-validate bug, until the next release
const urlFixRule = (value) => {
  return isURL(value, {
    require_tld: false
  });
};
VeeValidate.Validator.extend('url', urlFixRule);

/* eslint-disable no-new */
new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
});

【讨论】：