Vue Vee validate将有效URL标记为无效

Question

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

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

如果您输入http://localhost:3000在他们的示例中，您将看到消息字段不是有效的URL




Answer 1

搜索之后，我在Vee validate的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 }
});