제출할 때만 텍스트 필드 확인

제출할 때만 텍스트 필드 확인

온도.vue

<v-form ref="entryForm" @submit.prevent="save">
  <v-text-field label="Amount" :rules="numberRule"r></v-text-field>
  <v-btn type="submit">Save</v-btn>
</v-form>

<script>
export default {

   data: () => ({
     numberRule: [
       v => !!v || 'Field is required',
       v => /^\d+$/.test(v) || 'Must be a number',
     ],
   }),

   methods: save () {
     if (this.$refs.entryForm.validate()){
       //other codes
     }
   }
}
</script>

여기서 발생하는 작업은 텍스트 필드에 입력하는 동안 규칙이 실행됩니다.제출 시에만 규칙을 실행하고 싶습니다.텍스트 필드에서 어떻게 합니까?

Vuetifyrules입력이 값을 얻었을 때 실행됩니다.단, 이 값을 제출하는 폼에서만 실행되도록 하려면 해당 입력에 바인딩되어 있는 규칙을 수정해야 합니다.

처음에 규칙은 빈 배열이어야 합니다.버튼을 클릭하면 필요에 따라 규칙을 동적으로 추가하거나 삭제할 수 있습니다(코드 페이지 참조).

코드

<div id="app">
  <v-app id="inspire">
    <v-form ref="entryForm" @submit.prevent="submitHandler">
      <v-container>
        <v-row>
          <v-col
            cols="12"
            md="6"
          >
            <v-text-field
              v-model="user.number"
              :rules="numberRules"
              label="Number"
              required
            ></v-text-field>
          </v-col>
        </v-row>
        <v-row>
          <v-btn type="submit" color="success">Submit</v-btn>
          </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    valid: false,
    firstname: '',
    user: {
      number: ''
    },
    numberRules: []
  }),
  watch: {
    'user.number' (val) {
      this.numberRules = []
    }
  },
  methods: {
    submitHandler () {
      this.numberRules = [
        v => !!v || 'Field is required',
        v => /^\d+$/.test(v) || 'Must be a number',
      ]
      let self = this
      setTimeout(function () {
        if (self.$refs.entryForm.validate()){
         //other codes
          alert('submitted')
        }  
      })

    }
  }
})

저와 마찬가지로 키를 누를 때마다 유효성 검사가 실행되지 않도록 하려면validate-on-blur텍스트 필드에 프로포트가 표시되며, 이제 유효성 검사는 사용자가 전체 입력을 완료한 후에만 수행됩니다.

따라서 OP에 대한 정확한 답은 아니지만, 이것이 우리 대부분이 달성하고자 하는 것이라고 생각합니다.이 소품은 여기에 기재되어 있습니다.

감시자를 설정하지 않고도 이 문제를 해결할 수 있는 다른 방법이 있습니다.

<v-form lazy-validation v-model="valid" ref="form">
  <v-text-field
   class="w-100"
   light
   label="Nome"
   v-model="form.nome"
   :rules="[rules.required]"
   rounded
   required
   outlined
   hide-details="auto"
  ></v-text-field>
  <v-btn
   rounded
   height="50"
   width="200"
   :disabled="!valid"
   :loading="isLoading"
   class="bg-btn-secondary-gradient text-h6 white--text"
   @click="submitContactForm()"
  >
   Enviar
  </v-btn>
</v-form>

문서에서 볼 수 있듯이 lazy-validation on vuetify라는 소품이 있습니다.https://vuetifyjs.com/en/api/v-form/ # vuetify

따라서 v-form에는 validate()라는 $refs를 통해 볼 수 있는 메서드가 있으며 양식 규칙에 따라 true 또는 false를 반환할 수 있습니다.

또, 송신시에 검증을 트리거 하는 기능은 다음과 같습니다.

submitContactForm() {
  const isValid = this.$refs.form.validate();
  if (isValid) {
    alert("Obrigado pelo contato, sua mensagem foi enviada com sucesso!");
    this.form = {
      nome: "",
      celular: "",
      email: "",
      mensagem: ""
    };
    this.$refs.form.resetValidation(); // Note that v-form also has another function called resetValidation(), so after we empty our fields, it won't show the validation errors again.
  }
},

언급URL : https://stackoverflow.com/questions/57547475/validate-vuetify-textfield-only-on-submit