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

时间:2017-10-20 22:37:24

标签: javascript vue.js vuejs2 vee-validate

对于我的Vuejs应用,我正在使用Vee-validate进行验证。目前,它将有效网址(如http://localhost:3000)标记为无效。

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

如果您在示例中输入http://localhost:3000,则会看到消息The field field is not a valid URL.

1 个答案:

答案 0 :(得分:3)

搜索之后,我在Vee-validate's Github上发现了一些相关问题,但没有一个完全解决了我的问题。以下是我必须要做的就是验证localhost URL:

  1. 添加验证程序

    npm install validator
    
  2. 添加新规则:

    const urlFixRule = (value) => {
        return isURL(value, {
            require_tld: false
        });
    };
    
  3. 应用新规则:

    VeeValidate.Validator.extend('url', urlFixRule);
    
  4. 它在我的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 }
    });