Vue Vee验证将有效URL标记为无效

问题描述：

对于我的Vuejs应用，我使用Vee-validate进行验证。目前它将有效的URL标记为http://localhost:3000，因此无效。Vue Vee验证将有效URL标记为无效

这是对他们的样品也发生： http://vee-validate.logaretm.com/rules.html#rule-url

如果他们的样本中输入http://localhost:3000，你会看到消息The field field is not a valid URL.

答

搜索后，我发现了一些Vee-validate's Github相关的问题，但没有彻底解决了我的问题。这是我不得不做的就是它验证本地主机的网址：

添加验证包
```
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 } 
});

Vue Vee验证将有效URL标记为无效

相关推荐