Vue.js - 요소 UI - 폼 유효성 검사 상태를 확인하는 방법

Vue.js - 요소 UI - 폼 유효성 검사 상태를 확인하는 방법

쓰고 있는데,vue-js그리고element-ui

클릭할 필요 없이 양식의 유효화 상태를 확인하고 싶다.submit button

예

https://jsfiddle.net/nw8mw1s2/

재생산 단계

각 필드 클릭

검증은 흐림과 함께 트리거된다.

다른 입력 입력 채우기 시작

질문

마지막 입력의 유효성이 확인되면 어떻게 해야 하는가?isFormValidated로 돌리다.true.

즉, 「국가 오류가 있는 필드가 없는 경우에는, 돌린다」라고 어떻게 말할 수 있는가.valudateState진실로"

팁들

내 생각에 우리는 그 정보를 확인할 수 있을 것 같다.validateState각자의formItem형상의그러나 나는 그것을 구체적으로 어떻게 해야 할지 모르겠다.

나는 새로운 방법을 만들 것이다.updateIsFormValidated))을(를) 원주민에게 바인딩한다.focusout양식의 이벤트:

<el-form :model="ruleForm2" @focusout.native="updateIsFormValidated" ...>

이 방법은 양식의 입력 중 어떤 것이든 초점을 잃을 때마다 발사된다.양식 구성 요소의 각 필드가 성공적으로 검증되었는지 확인하여 양식 항목의 유효성 검사 상태가 여전히 보류 중인 경우 각 100밀리초마다 실행됨:

updateIsFormValidated() {
  let fields = this.$refs.ruleForm2.fields;
  if (fields.find((f) => f.validateState === 'validating')) {
    setTimeout(() => { this.updateIsFormValidated() }, 100);
  } else {
    this.isFormValidated = fields.reduce((acc, f) => {
      let valid = (f.isRequired && f.validateState === 'success');
      let notErroring = (!f.isRequired && f.validateState !== 'error');
      return acc && (valid || notErroring);
    }, true);
  }
}

여기 일하는 사람이 있다.

참조URL: https://stackoverflow.com/questions/44399041/vue-js-element-ui-how-to-know-the-state-of-form-validation