Vue Vee-validate, отмечающий действительные URL-адреса как недействительные

Question

Для моего приложения Vuejs я использую Vee-validate для проверки. В настоящее время он помечает действительные URL, например, http://localhost:3000, как недействительный.

Это происходит на их примере также: http://vee-validate.logaretm.com/rules.html

Если вы введете http://localhost:3000 в их примере вы увидите сообщение The field field is not a valid URL.

Answer 1

После поиска я нашел некоторые связанные проблемы на Github от Vee-validate, но ни одна из них полностью не решила мою проблему. Вот что мне нужно было сделать, чтобы проверить локальные 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 }
});