vue perd la vérification du focus

Vue.js est un framework JavaScript populaire largement utilisé pour développer des applications monopage et des applications Web dynamiques. Il est simple, flexible et efficace. Dans le développement d'applications Vue.js, il est souvent nécessaire d'implémenter la fonction de vérification de perte de focus pour garantir l'exactitude des données saisies par l'utilisateur. Cet article présentera comment Vue.js implémente la fonction d'inspection de perte de focus.

Validation du formulaire Vue.js

Vue.js fournit de nombreuses fonctions de validation de formulaire qui peuvent facilement vérifier les données d'entrée. La validation du formulaire Vue.js peut être implémentée des manières suivantes :

1. Liaison d'attribut : utilisez l'instruction v-bind pour lier les valeurs d'attribut et spécifiez la valeur d'attribut pour réaliser la vérification de la valeur d'entrée .
2. Listener : utilisez l'écouteur pour surveiller les modifications des valeurs d'entrée et afficher les invites d'erreur.
3. Instructions personnalisées : permet aux développeurs de personnaliser les instructions pour vérifier les valeurs d'entrée.

Implémentation de l'inspection de perte de focus

Comment implémenter la fonction d'inspection de perte de focus dans Vue.js ? Le processus d'implémentation est le suivant :

La première étape consiste à définir les règles de validation dans le composant de la zone de saisie :

<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>

La deuxième étape consiste à écrire un mixin global à partager globalement Méthode de vérification :

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();
          }
        }
      }
    }
  }
})

La troisième étape consiste à appeler la méthode checkValidate lorsque le formulaire est soumis :

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

Grâce aux étapes ci-dessus, nous pouvons réaliser l'inspection par perte de concentration fonction. Lorsque la zone de saisie perd le focus, la méthode checkName sera exécutée pour vérification. Lorsque le formulaire est soumis, la méthode checkValidate est appelée pour effectuer une vérification du formulaire afin de garantir l'exactitude des données saisies par l'utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!