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

Question

对于我的 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.

Answer 1

经过搜索，我在Vee-validate 的 Github上发现了一些相关问题，但没有一个完全解决我的问题。这是我必须做的事情才能验证本地主机 URL：

1. 添加验证器包

   npm install validator
   

2. 添加新规则：

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

3. 应用新规则：

   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 }
});