Vee-validate를 사용하여 폼이 올바르게 입력될 때까지 버튼을 비활성화합니다.

Vee-validate를 사용하여 폼이 올바르게 입력될 때까지 버튼을 비활성화합니다.

폼이 올바르게 입력될 때까지 송신 버튼을 무효로 하고 싶은 경우는, 다음과 같습니다.

<form>
   <input type="text" class="form-control" v-validate="'required|email'" name="email" placeholder="Email" v-model="userCreate.userPrincipalName" />
   <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
   <button v-if="errors.any()" disabled="disabled" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit">Send Invite</button>
   <button v-else="errors.any()" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit">Send Invite</button>
</form>

위에서는 에러 메시지만 출력하고 값 입력을 시작한 후 전송 버튼을 비활성화합니다.입력과 대화하기 전에 빈 문자열을 보낼 수 없도록 처음부터 비활성화해야 합니다.

또 다른 질문은 이 제품을 사용하는 것보다 더 좋은 방법이 있는가 하는 것입니다.v-if이걸 하기 위해서요?

편집:

 userCreate: {
        customerId: null,
        userPrincipalName: '',
        name: 'unknown',
        isAdmin: false,
        isGlobalAdmin: false,
        parkIds: []
    }

아마도 가장 간단한 방법은ValidationObserver폼의 슬롯을 설정합니다.다음과 같이 합니다.

<ValidationObserver v-slot="{ invalid }">
  <form @submit.prevent="submit">
    <InputWithValidation rules="required" v-model="first" :error-messages="errors" />
    <InputWithValidation rules="required" v-model="second" :error-messages="errors" />
    <v-btn :disabled="invalid">Submit</v-btn>
  </form>
</ValidationObserver>

상세정보 - 검증 옵서버

버튼의 설정:disabled:"errors.any()"검증 후 버튼을 비활성화합니다.단, 컴포넌트가 처음 로드될 때 이 컴포넌트는 계속 활성화됩니다.

입니다.this.$validator.validate()에서mounted()method를 지정하면 @im_method에서 알 수 있듯이 부팅 시 폼이 검증되고 오류 메시지가 즉시 표시됩니다.그 해결방법은 형태를 꽤 추하게 만들 것이다.또,Object.keys(this.fields).some(key => this.fields[key].invalid);구문은 매우 추악합니다.

---

대신 버튼을 클릭했을 때 검증기를 실행하여 약속의 유효성을 얻은 후 조건부로 사용하십시오.이 솔루션을 사용하면 부팅 시 폼은 깨끗해 보이지만 버튼을 클릭하면 오류가 표시되고 버튼이 비활성화됩니다.

<button :disabled="errors.any()" v-on:click="sendInvite();">
    Send Invite
</button>

sendInvite() {
    this.$validator.validate().then(valid=> {
        if (valid) {
            ...
        }
    })
}

검증자 API

필요한 값이 모두 채워질 때까지 버튼을 비활성화하는 한 가지 방법은 모든 값이 할당되었는지 여부에 관계없이 bool을 반환하는 계산 속성을 사용하는 것입니다.

예:

다음과 같이 계산된 속성을 만듭니다.

computed: {
  isComplete () {
    return this.username && this.password && this.email;
  }
}

그리고 그것을 html에 바인드한다.disabled속성:

<button :disabled='!isComplete'>Send Invite</button

즉, 다음과 같은 경우 버튼을 비활성화합니다.!isComplete맞다

또한 당신의 경우 if/else 바인딩 버튼이 두 개 필요 없습니다.양식이 완료되었는지 또는 오류가 있는지 여부에 따라 다음 중 하나만 사용하여 숨기거나 표시할 수 있습니다.

<button :disabled="errors.any() || !isCompleted" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit">Send Invite</button>

이 버튼은 모든 필드가 채워지고 오류가 발견되지 않을 때까지 비활성화됩니다.

또 다른 방법은 v-validate를 사용하는 것입니다.이니셜

<input type="text" class="form-control" v-validate.initial="'required|email'" name="email" placeholder="Email" v-model="userCreate.userPrincipalName" />

그러면 페이지가 로드된 후 이메일 입력 요소의 유효성 검사가 실행됩니다.입력과 상호 작용하기 전에 버튼을 비활성화합니다.

양식이 유효하지 않은지 확인하기 위해computed다음과 같은 속성:

computed: {
    isFormInValid() {
      return Object.keys(this.fields).some(key => this.fields[key].invalid);
    },
},

사용자가 어떤 필드와 상호 작용하기 직전에 체크를 시작하려면 내부에서 수동으로 검증할 수 있습니다.mounted「 」 「 」 :

mounted() {
   this.$validator.validate();
}

또는 계산 사용

computed: { 
    formValidated() { 
        return Object.keys(this.fields).some(key => this.fields[key].validated) && Object.keys(this.fields).some(key => this.fields[key].valid);
        } 
}

및 사용

button :disabled="!formValidated" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit">

현재 버전 3의 경우(작성 시점).

순서 1

양식 필드를 볼 수 있는지 확인합니다.

순서 2

대한 .<ValidationObserver ref="validator">.

순서 3

양식 필드가 변경될 때마다 자동으로 유효성 검사를 트리거합니다.

다음은 예를 제시하겠습니다.

     export default {
        data() {
            return {
                form: {
                    isValid: false,
                    fields: {
                        name: '',
                        phone: '',
                    }
                }
            }
        },

        watch: {
            'form.fields': {
                deep: true,
                handler: function() {
                    this.updateFormValidity();
                }
            }
        },
        methods: {
            async updateFormValidity() {
                this.form.isValid = await this.$refs.validator.validate({
                    silent: true // Validate silently and don't cause observer errors to be updated. We only need true/false. No side effects.
                });
            },
        }
    }

<button :disabled="form.isValid">
    Submit
</button>

계산 속성을 추가할 수 있습니다.

  ...
  computed: {
      isFormValid () {
          return Object.values(this.fields).every(({valid}) => valid)
      }
  }
  ...

버튼에 바인드됩니다.

<button :disabled="!isFormValid" class="btn btn-primary" type="submit">Send Invite</button>

vee-variable 버전 ^2.0.3에서 시도합니다.

언급URL : https://stackoverflow.com/questions/47178484/using-vee-validate-to-disable-button-until-form-is-filled-out-correctly