Vue-validator 如何做统一的验证

Question

1. 使用 vue-validator 封装好一个带验证的input组件, 由父组件传递验证规则,

2. 现在, 我需要在页面点击提交的时候对结果进行验证, 验证失败的组件显示相应的提示.

3. 请问: 我要如何在页面中触发子组件的验证事件.

//my-input.vue
<validity :validators="validators">
  <input type="text" :value="value" @focusout="handlerValidate">
  <span v-for="error in result.errors">{{error.message}}</p>
</validity>
handlerValidate (event) {
  let $validity = event.target.$validity;

  $validity.validate(() => {
    this.result = $validity.result;
  });
}
// home.vue
<my-form>
  <item>
    <my-input v-model="username" :validators="validators"></my-input>
  </item>
  <item>
    <button>验证</button>
  </item>
</my-form>

Answer 1

楼主需要的可能是这个吧：
验证目标表单元素
https://github.com/kazupon/vu...

methods: {
    onSubmit: function (e) {
      // validate the all fields manually with touched
      var self = this
      this.$validate(true, function () {
        console.log('validate done !!')
        if (self.$validation.invalid) {
          e.preventDefault()
        }
      })
    }
  }

Answer 2

推荐使用 VccValidate
https://dev-zl.github.io/VccV...