Vue.js Vee 모든 데이터가 유효할 때까지 데이터 전송을 방지하는 방법을 검증합니다.

Vue.js Vee 모든 데이터가 유효할 때까지 데이터 전송을 방지하는 방법을 검증합니다.

저의 요구는 이런 것입니다.

1. 사용자 입력을 검증하기 위해 필드를 입력해야 합니다.
2. 사용자가 필드를 입력하고 [Submit]버튼을 누르면 [Submit]으로 넘어가기 전에 모든 에러 메시지를 표시합니다.
3. 사용자 데이터에 오류가 없는 경우 전송이 발생합니다.

이건 내 암호야

<template>
  <div>
      <h1>Add Items</h1>
      Product Name : 
      <input
      type="text"
      name="product"
      v-model="product"
      v-validate="'required|alpha_dash'"
      >
      <span style="color:red;">{{errors.first('product')}}</span>
      <br>
      Product Price : 
      <input 
      type="number" 
      name="price" 
      v-model="price"
      v-validate="'required|min_value:100|max_value:500'"
      >
    <span style="color:red;">{{errors.first('product')}}</span>
      <br>
      <button @click="submit">Save</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: "",
      product: ""
    };
  },
  methods: {
    submit() {
      alert("On submit");
    }
  }
};
</script>

이제 첫 번째 오류만 표시됩니다.{{errors.first('product')}}이 대신 모든 오류를 한 번에 표시하려고 합니다.

그리고.

입력 필드를 터치한 경우에만 오류가 표시됩니다.필드를 터치하든 하지 않든 모든 검증 오류를 표시하고 싶다. Submit 버튼을 누르면 모든 오류를 표시하고 싶다.

Sovalina는 동작했지만 $validator.validateAll()은 경보 후에 실행되고 있었습니다.즉, 처음에 검증되지 않았습니다.이 코드를 찾았는데 잘 작동했어요.

submit() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          alert('Form Submitted!');
          return;
        }

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

여기서 : https://baianat.github.io/vee-validate/examples/

최신 vee-validate(이것을 쓰고 있는 버전 3.0.5)에서는 이 모든 것이 변경되었습니다.폼 전체를 포장으로 감싸야 합니다.ValidationObserver참조가 있는 컴포넌트(나중에 제출 방법으로 액세스 할 수 있습니다) -

    <ValidationObserver ref="observer" v-slot="{ invalid }"  @submit.prevent="submit()">
        <ValidationProvider ...
            <input... etc

송신 방법은, 다음과 같이 할 필요가 있습니다.

async submit () {
  const isValid = await this.$refs.observer.validate()
  if (isValid) {
    // data is valid - post your form data
  } else {
    alert('Data isn't valid')
  }
}

Validation Provider 컴포넌트를 Import할 수 있는 방법은 여러 가지가 있습니다.이것은 일반적인 vue입니다.다음은 문서에 대한 링크입니다.

https://logaretm.github.io/vee-validate/api/validation-observer.html

사용할 수 있습니다.validateAll방법:

   submit() {
      this.$validator.validateAll()
      if (!this.errors.any()) {
        alert('submit')
      }
    }

여기서 빈둥거리다

언급URL : https://stackoverflow.com/questions/50133297/vue-js-veevalidate-how-to-prevent-the-submission-of-data-until-all-the-data-is-v