Question

我正在使用 vee-validate 来验证我的字段，这是我的问题：

我想在提交之前验证表单，并且某些表单位于子组件中那我怎么能接近呢？

Answer 1

首先关注（提交前验证表单），您可以根据文档

执行以下操作

http://vee-validate.logaretm.com/examples.html#validate-form

html标记：

<form @submit.prevent="validateBeforeSubmit">
    <div class="column is-12">
        <label class="label">Email</label>
        <p class="control has-icon has-icon-right">
            <input name="email" v-model="email" v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" type="text" placeholder="Email">
            <i v-show="errors.has('email')" class="fa fa-warning"></i>
            <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
        </p>
    </div>
    <div class="column is-12">
        <label class="label">Name</label>
        <p class="control has-icon has-icon-right">
            <input name="name" v-model="name" v-validate="'required|alpha'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="Name">
            <i v-show="errors.has('name')" class="fa fa-warning"></i>
            <span v-show="errors.has('name')" class="help is-danger">{{ errors.first('name') }}</span>
        </p>
    </div>
    <div class="column is-12">
        <label class="label">Phone</label>
        <p class="control has-icon has-icon-right">
            <input name="phone" v-model="phone" v-validate="'required|numeric'" :class="{'input': true, 'is-danger': errors.has('phone') }" type="text" placeholder="Phone">
            <i v-show="errors.has('phone')" class="fa fa-warning"></i>
            <span v-show="errors.has('phone')" class="help is-danger">{{ errors.first('phone') }}</span>
        </p>
    </div>
    <div class="column is-12">
        <label class="label">Website</label>
        <p class="control has-icon has-icon-right">
            <input name="url" v-model="url" v-validate="'required|url'" :class="{'input': true, 'is-danger': errors.has('url') }" type="text" placeholder="Website">
            <i v-show="errors.has('url')" class="fa fa-warning"></i>
            <span v-show="errors.has('url')" class="help is-danger">{{ errors.first('url') }}</span>
        </p>
    </div>

    <div class="column is-12">
        <p class="control">
            <button class="button is-primary" type="submit">Submit</button>
        </p>
    </div>
</form>

您的vue组件：

export default {
  name: 'form-example',
  data: () => ({
    email: '',
    name: '',
    phone: '',
    url: ''
  }),
  methods: {
    validateBeforeSubmit() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          // eslint-disable-next-line
          alert('From Submitted!');
          return;
        }

        alert('Correct them errors!');
      });
    }
  }
};

关于您的嵌套组件表单，让我们提供一些代码，以便我们为您提供更好的帮助

Answer 2

要使子组件在调用import React, { Component } from 'react'; class Stack extends Component { toggleNext() { console.log("clicked toggleNext()"); if(this.state.selectedPicture === this.state.picture.length - 1) { return; } this.setState(prevState => ({ selectedPicture: prevState.selectedIndex + 1 })); } togglePrevious() { console.log("clicked togglePrevious()"); if(this.state.selectedPicture === 0) { return; } this.setState(prevState => ({ selectedPicture: prevState.selectedPicture - 1 })); } render() { return( <div> <img src={this.props.imagesOnStack} alt=""/> <button onClick={this.toggleNext}>Next</button> <button onClick={this.togglePrevious}>Prev</button> </div> ); } } export default Stack;时得到验证，请使用vue的Provide / Inject api为子组件提供父验证器：

validateAll

https://baianat.github.io/vee-validate/concepts/injections.html#injecting-parent-validator

子组件验证vee-validate

2 个答案: