vue가 포커스 확인을 잃습니다.

Vue.js는 단일 페이지 애플리케이션 및 동적 웹 애플리케이션을 개발하는 데 널리 사용되는 인기 있는 JavaScript 프레임워크입니다. 간단하고 유연하며 효율적입니다. Vue.js 애플리케이션 개발 시 사용자 입력 데이터의 정확성을 보장하기 위해 포커스 손실 확인 기능을 구현해야 하는 경우가 많습니다. 이 글에서는 Vue.js가 Lost Focus 검사 기능을 구현하는 방법을 소개합니다.

Vue.js 양식 유효성 검사

Vue.js는 입력 데이터를 쉽게 확인할 수 있는 다양한 양식 유효성 검사 기능을 제공합니다. Vue.js 양식 유효성 검사는 다음과 같은 방법으로 구현할 수 있습니다.

1. 속성 바인딩: v-bind 지시문을 사용하여 속성 값을 바인딩하고, 속성 값을 지정하여 입력 값을 확인합니다.
2. 리스너: 리스너를 사용하여 입력 값의 변화를 모니터링하고 오류 프롬프트를 표시합니다.
3. 사용자 정의 지침: 개발자가 지침을 사용자 정의하여 입력 값을 확인할 수 있습니다.

초점 상실 확인 구현

Vue.js에서 초점 상실 확인 기능을 어떻게 구현하나요? 구현 프로세스는 다음과 같습니다.

첫 번째 단계, 입력 상자 구성 요소에 유효성 검사 규칙 정의:

<template>
  <div>
    <label for="name">姓名：</label>
    <input type="text" name="name" id="name" v-model="name" v-on:blur="checkName" />
    <span v-show="nameError" style="color: red;">请输入正确的姓名</span>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        nameError: false
      }
    },
    methods: {
      checkName() {
        var reg = /^[u4e00-u9fa5]{2,4}$/;
        if (!reg.test(this.name)) {
          this.nameError = true;
        } else {
          this.nameError = false;
        }
      }
    }
  }
</script>

두 번째 단계, 전역 믹스인을 작성하여 유효성 검사 방법을 전 세계적으로 공유:

Vue.mixin({
  methods: {
    checkValidate() {
      const refs = this.$refs;
      for (const ref in this.$refs) {
        if (refs.hasOwnProperty(ref)) {
          const element = refs[ref][0];
          if (element && element.required) {
            element.validate();
          }
        }
      }
    }
  }
})

3단계, 형식으로 호출 제출 시 checkValidate 방법:

<template>
  <div>
    <form action="/add" method="post" v-on:submit.prevent="checkValidate">
      <AddInput ref="addInput"></AddInput>
      <button type="submit">添加</button>
    </form>
  </div>
</template>

위 단계를 통해 초점 상실 확인 기능을 구현할 수 있습니다. 입력 상자가 포커스를 잃으면 확인을 위해 checkName 메서드가 실행됩니다. 양식이 제출되면 checkValidate 메소드가 호출되어 사용자가 입력한 데이터의 정확성을 확인하기 위해 양식 확인을 수행합니다.

위 내용은 vue가 포커스 확인을 잃습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!