Vue에서 vux-ui 사용자 정의 양식 유효성 검사를 사용할 때 주의 사항은 무엇입니까?

이번에는 vux-ui를 활용한 Vue 커스터마이징을 가져왔습니다. 양식 확인Notes아래에서는 어떤 실제 사례를 살펴볼까요?

vux와 함께 프레임워크 vue를 사용하기 시작했을 때 이 UI 라이브러리를 사용하는 것이 약간 어렵다는 것을 알았습니다. 양식 검증 과정에서 직면했던 두 가지 요구 사항 문제와 해결 방법에 대해 이야기해 보겠습니다.

1. x-input 구성 요소를 사용하면 공식이 세 가지 유형의 is-type검증기, 즉 이메일, 중국 이름, 중국 모바일만 제공한다는 것을 알 수 있습니다. 인증기를 쓰려고?

해결책: is-type 유효성 검사기를 사용자 정의하세요(테스트 후 유효한 일반 확인을 사용할 수 있습니다)

<x-input type="number" v-model="code" placeholder="请输入验证码" :is-type="codeValue" />
export default {
  data() {
    return{
      code: '',
      codeValue: function(value){
        return {
          valid: value.length === 4,
          msg: "验证码有误!"
        }
      }
    }
  }
}

2. 양식 내용을 올바르게 입력한 후에만 양식 제출 버튼이 실행될 수 있습니다(그림 참조)

해결 방법: x-input 구성 요소의 @on-change 이벤트와 ref 속성을 사용하세요.

<x-input type="number" v-model="code" placeholder="请输入验证码" :is-type="codeValue" ref="refcode" @on-change="keyDown" />
<x-button action-type="submit" :disabled="disabled">完成</x-button>
 export default {
    data() {
      return{
        code: '',
        disabled: true,
        codeValue: function(value){
          return {
            valid: value.length === 4,
            msg: "验证码有误!"
          }
        }
      }
    },
    methods: {
      keyDown(){
        if(this.$refs.refcode.valid == true && this.code != ''){
          this.disabled = false;
        }else{
          this.disabled = true;
        }
      }
    }
  }

이 글의 사례를 읽으신 후 방법을 숙달하셨다고 생각합니다. 더 흥미로운 정보를 보려면 주의하세요. 기타 관련 기사는 PHP 중국어 웹사이트에 있습니다!

추천 도서:

Angular Route Guard 사용 단계에 대한 자세한 설명

React 라우팅 관리 React Router 사용 단계에 대한 자세한 설명

위 내용은 Vue에서 vux-ui 사용자 정의 양식 유효성 검사를 사용할 때 주의 사항은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!