Comment définir la longueur acceptée dans Vue

Vue doit souvent traiter la longueur de la zone de saisie pour garantir que le contenu saisi par l'utilisateur répond aux exigences. Dans de nombreux cas, nous souhaitons limiter la durée des saisies utilisateur, en particulier lorsqu'elles impliquent des informations sensibles telles que des noms d'utilisateur et des mots de passe. Comment définir la longueur acceptée dans Vue ? Les éléments suivants seront présentés sous trois aspects : les concepts de base, la mise en œuvre des composants et les applications pratiques.

1. Concepts de base

Avant de présenter comment définir la longueur d'acceptation dans Vue, vous devez d'abord comprendre quelques concepts de base.

1. Zone de saisie

La zone de saisie fait référence à un contrôle dans lequel les utilisateurs peuvent saisir des caractères, des chiffres, etc. La zone de saisie est encapsulée dans Vue et une liaison bidirectionnelle avec la zone de saisie peut être réalisée via v-model.

2. Longueur

La longueur fait référence au nombre de caractères saisis dans la zone de saisie. Dans Vue, vous pouvez obtenir le contenu dans la zone de saisie via la valeur de v-model et utiliser la longueur du contenu pour le limiter.

3. Empêcher l'injection de caractères spéciaux

Lorsque vous limitez la longueur, vous devez faire attention au problème de l'injection de caractères spéciaux. L'injection de caractères spéciaux fait référence à l'attaque du système ou à l'exécution d'opérations illégales en saisissant des caractères spéciaux. Afin d'éviter l'injection de caractères spéciaux, la valeur d'entrée de la zone de saisie doit être filtrée ou échappée.

2. Implémentation des composants

Pour limiter la longueur de saisie de la zone de saisie, cela peut être réalisé en personnalisant les composants. Ce qui suit prend un simple composant de zone de saisie comme exemple pour montrer comment définir la longueur d'acceptation.

1. Définissez le composant

Tout d'abord, définissez un composant de zone de saisie dans Vue, y compris une zone de saisie et la limite de longueur correspondante. Le code spécifique est le suivant :

<template>
  <div>
    <input type="text" v-model="inputValue" @input="onInput" />
    <div>{{ count }}/20</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
      count: 0,
    };
  },
  methods: {
    onInput() {
      this.count = this.inputValue.length;
      if (this.count > 20) {
        this.inputValue = this.inputValue.slice(0, 20);
        this.count = this.inputValue.length;
      }
    },
  },
};
</script>

2. Code d'analyse

Le code ci-dessus définit un attribut de données nommé inputValue, qui est utilisé pour stocker la valeur de la zone de saisie. Dans le même temps, un attribut de données nommé count est défini, qui est utilisé pour calculer la longueur des caractères dans la zone de saisie. Écoutez l'événement d'entrée dans la méthode onInput pour implémenter la liaison bidirectionnelle et la limitation de longueur de la zone de saisie. Lorsque la longueur des caractères dans la zone de saisie dépasse 20, les 20 premiers caractères seront coupés du contenu de la zone de saisie.

3. Utilisez des composants

Introduisez et utilisez le composant de zone de saisie partout où vous en avez besoin. Le code spécifique est le suivant :

<template>
  <div>
    <input-length-limit />
  </div>
</template>

<script>
import InputLengthLimit from "@/components/InputLengthLimit.vue";

export default {
  components: {
    InputLengthLimit,
  },
};
</script>

Le code ci-dessus utilise le composant Component de Vue pour introduire le composant InputLengthLimit défini ci-dessus dans le composant actuel. Utilisez ensuite ce composant directement dans le modèle pour limiter la longueur de la zone de saisie.

3. Application pratique

En plus des composants personnalisés, vous pouvez également utiliser les instructions fournies par Vue pour limiter la longueur de la zone de saisie dans les applications réelles. Ce qui suit utilise un scénario d'application pratique pour démontrer comment utiliser les instructions pour définir la longueur d'acceptation.

1. Description du scénario

Supposons qu'il existe une page d'inscription, qui contient quatre zones de saisie pour le nom d'utilisateur, le mot de passe, le mot de passe de confirmation et l'e-mail. Parmi eux, la longueur des zones de saisie du nom d'utilisateur et du mot de passe doit être limitée à 20 caractères, et la longueur de la zone de saisie de l'e-mail doit être limitée à 50 caractères.

2. Implémentation du code

Le code spécifique est le suivant :

<template>
  <div>
    <div class="form-item">
      <label for="username">用户名：</label>
      <input id="username" v-limit-length:20 />
    </div>
    <div class="form-item">
      <label for="password">密码：</label>
      <input id="password" v-limit-length:20 />
    </div>
    <div class="form-item">
      <label for="confirm-password">确认密码：</label>
      <input id="confirm-password" />
    </div>
    <div class="form-item">
      <label for="email">邮箱：</label>
      <input id="email" v-limit-length:50 />
    </div>
  </div>
</template>

<script>
export default {
  directives: {
    "limit-length": {
      inserted: function(el, binding) {
        el.addEventListener("input", function() {
          const maxLength = binding.value;
          const inputValue = el.value;
          if (inputValue.length > maxLength) {
            el.value = inputValue.slice(0, maxLength);
          }
        });
      },
    },
  },
};
</script>

Dans le code ci-dessus, l'instruction personnalisée v-limit-length est utilisé pour implémenter la limite de longueur de la zone de saisie. Liez cette instruction à chaque zone de saisie sur la page d'inscription pour implémenter des restrictions de longueur sur différentes zones de saisie. Dans la fonction de crochet inséré de l'instruction, l'événement d'entrée de la zone de saisie est surveillé pour mettre en œuvre la surveillance et la limitation de longueur de l'entrée de la zone de saisie.

4. Résumé

La limite de longueur de la zone de saisie dans Vue peut être implémentée via des composants ou des instructions personnalisés. Pendant le processus de mise en œuvre, vous devez prêter attention au problème de l'injection de caractères spéciaux et filtrer ou échapper la valeur d'entrée de la zone de saisie pour assurer la sécurité du système. L'application de la méthode ci-dessus peut facilement limiter la longueur de la zone de saisie et améliorer la facilité d'utilisation et l'expérience utilisateur du système.

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!