Vue Vee驗證將有效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's Github相關的問題，但沒有徹底解決了我的問題。這是我不得不做的就是它驗證本地主機的網址：

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