Comment utiliser les fonctions de validation de formulaire dans la documentation Vue-Voir.js-php.cn

Comment utiliser les fonctions de validation de formulaire dans la documentation Vue

WBOY

Libérer： 2023-06-20 23:25:04

original

1846 Les gens l'ont consulté

Vue est un framework JavaScript progressif pour créer des interfaces utilisateur. L'objectif de Vue est sa simplicité et sa flexibilité, qui peuvent être utilisées dans presque tous les projets. En tant que développeurs front-end, nous devons souvent utiliser des fonctions lors de la validation de formulaires. La documentation Vue fournit des fonctions de validation de formulaire, qui sont très pratiques et peuvent aider les développeurs à effectuer la validation de formulaire plus efficacement. Cet article expliquera comment utiliser la fonction de validation de formulaire dans le document Vue.

Tout d'abord, nous devons utiliser v-model pour lier la valeur du champ de formulaire dans le modèle Vue. Par exemple, le code suivant utilise v-model pour lier la valeur d'une zone de saisie : v-model绑定表单字段的值。例如，以下代码使用v-model绑定一个输入框的值：

<template>
  <div>
    <input type="text" v-model="username">
  </div>
</template>

Copier après la connexion

在Vue文档中，表单验证函数包含在Vue的实例方法$validator中。要使用表单验证函数，我们需要先通过Vue.use(VeeValidate)引入VeeValidate插件，这是Vue官方推荐的表单验证插件。

在引入VeeValidate之后，我们可以在Vue实例的生命周期中调用$validator方法，例如在created()方法中，以便在Vue实例被创建时完成初始化。

<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';  // 引入VeeValidate插件
Vue.use(VeeValidate);  // 使用VeeValidate
export default {
  name: 'formDemo',
  data() {
    return {
      username: '',
    };
  },
  created() {
    this.$validator.localize('zh_CN', {  // 将验证器语言设置为中文
      messages: {
        required: (field) => `${field}不能为空`,
      },
    });
  }
}

Copier après la connexion

上述代码中，在created()方法中，我们使用this.$validator.localize()方法将验证器的语言设置为中文，并定义了一条自定义错误消息。这里的required是一个默认的VeeValidate规则，它表示此项字段必填。在本例中，自定义错误消息是“用户名不能为空”。

现在，我们定义了一个自定义的VeeValidate规则checkUsernameAvailable，在本例中，它是用来检查用户名是否可用的。在该规则中，我们可以访问输入框绑定的值，然后我们可以使用Axios请求POST方法将该值发送到服务器。如果返回的结果是数据状态码为200，则表示该用户名可用，否则表示用户名不可用。

<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import axios from 'axios';
Vue.use(VeeValidate);
export default {
  name: 'formDemo',
  data() {
    return {
      username: '',
    };
  },
  created() {
    this.$validator.localize('zh_CN', {
      messages: {
        required: (field) => `${field}不能为空`,
        checkUsernameAvailable: (field) => `${field}已经被注册了`,
      },
    });

    this.$validator.extend('checkUsernameAvailable', {
      getMessage: (field, params, data) => data.message,
      validate: async (value) => {
        const { data } = await axios.post('/api/checkusername', {
          username: value,
        });
        return {
          valid: data.status === 200,
          data: data,
        };
      },
    });
  }
}
</script>

Copier après la connexion

在上述代码中，我们定义了一个带有自定义函数的验证规则checkUsernameAvailable，该规则使用异步/await来等待Axios的POST方法响应。如果响应中的状态码为200，则返回true，否则返回false。

最后，我们需要将这个验证规则绑定到HTML表单中。在表单元素中添加data-vv-validate属性，这告诉Vue Validator开始验证该表单。然后，我们在需要验证的表单元素中添加自定义规则v-validate="{ rules: { checkUsernameAvailable: true } }"。这告诉Vue Validator使用我们自定义的验证规则。

<template>
  <div>
    <form @submit.prevent="">
      <div>
        <input type="text" name="username" v-model="username" data-vv-validate="''" v-validate="{ rules: { checkUsernameAvailable: true } }" placeholder="请输入用户名">
        <div v-show="errors.has('username')" class="invalid-feedback">{{ errors.first('username') }}</div>
      </div>
      <button @click="submitForm">提交</button>
    </form>
  </div>
</template>

Copier après la connexion

在上述代码中，我们在输入框中添加了一个错误消息v-show="errors.has('username')"rrreee

Dans la documentation de Vue, la fonction de validation de formulaire est incluse dans la méthode d'instance de Vue $validator. Pour utiliser la fonction de validation de formulaire, nous devons d'abord introduire le plug-in VeeValidate via Vue.use(VeeValidate), qui est le plug-in de validation de formulaire officiellement recommandé pour Vue.

Après avoir introduit VeeValidate, nous pouvons appeler la méthode $validator dans le cycle de vie de l'instance Vue, comme dans la méthode created(), de sorte que lorsque la Vue l'instance est créée Initialisation complète.

rrreee

Dans le code ci-dessus, dans la méthode created(), nous utilisons la méthode this.$validator.localize() pour définir la langue du validateur sur le chinois et définissez Créer un message d'erreur personnalisé. Le obligatoire ici est une règle VeeValidate par défaut, qui indique que ce champ est obligatoire. Dans cet exemple, le message d'erreur personnalisé est « Le nom d'utilisateur ne peut pas être vide ». 🎜🎜Maintenant, nous définissons une règle VeeValidate personnalisée checkUsernameAvailable, dans ce cas, elle est utilisée pour vérifier si le nom d'utilisateur est disponible. Dans cette règle, nous avons accès à la valeur liée à la zone de saisie, puis nous pouvons utiliser la méthode POST de requête Axios pour envoyer cette valeur au serveur. Si le résultat renvoyé est un code d'état des données de 200, cela signifie que le nom d'utilisateur est disponible, sinon cela signifie que le nom d'utilisateur n'est pas disponible. 🎜rrreee🎜Dans le code ci-dessus, nous définissons une règle de validation checkUsernameAvailable avec une fonction personnalisée, qui utilise asynchrone/await pour attendre la réponse de la méthode POST d'Axios. Si le code d'état dans la réponse est 200, true est renvoyé, sinon false est renvoyé. 🎜🎜Enfin, nous devons lier cette règle de validation au formulaire HTML. Ajoutez l'attribut data-vv-validate à l'élément de formulaire. Cela indique à Vue Validator de commencer à valider le formulaire. Ensuite, nous ajoutons des règles personnalisées v-validate="{ Rules: { checkUsernameAvailable: true } }" dans les éléments de formulaire qui nécessitent une validation. Cela indique à Vue Validator d'utiliser nos règles de validation personnalisées. 🎜rrreee🎜Dans le code ci-dessus, nous avons ajouté un message d'erreur v-show="errors.has('username')" à la zone de saisie. Lorsque le message d'erreur n'est pas vide, le message le fera. être montré. 🎜🎜Maintenant, nous avons terminé la création et la liaison des règles de validation personnalisées. Si la valeur dans la zone de saisie du nom d'utilisateur est disponible côté serveur, le formulaire soumet les données, sinon Vue Validator affichera un message d'erreur personnalisé. 🎜🎜Dans l'ensemble, Vue Validator est un plugin de validation de formulaire très puissant et facile à utiliser. Vue fournit une excellente plate-forme permettant aux développeurs front-end de développer rapidement la validation de formulaires. L'utilisation de Vue Validator est facile à comprendre et peut considérablement améliorer l'efficacité du développement. 🎜

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!