Comment gérer la vérification et la soumission de la saisie d'un formulaire dans Vue-Voir.js-php.cn

Comment gérer la vérification et la soumission de la saisie d'un formulaire dans Vue

WBOY

Libérer： 2023-10-15 08:48:18

original

1926 Les gens l'ont consulté

Comment gérer la vérification et la soumission de la saisie dun formulaire dans Vue

Vérification et soumission des entrées de formulaire dans Vue
Dans le développement front-end, la vérification et la soumission des entrées de formulaire sont un lien très important. En tant que framework frontal populaire, Vue fournit des moyens pratiques pour gérer la vérification et la soumission des entrées de formulaire. Cet article expliquera comment vérifier et soumettre la saisie d'un formulaire dans Vue, et donnera quelques exemples de code.

Validation des entrées de formulaire
Dans Vue, nous pouvons utiliser le validateur intégré pour valider les entrées de formulaire. Vue fournit une méthode appelée « instructions de validation », qui peut être utilisée directement dans les modèles.

Tout d'abord, introduisez les fichiers de bibliothèque de Vue et Element UI dans la balise

du HTML (Element UI est un ensemble de bibliothèques de composants de bureau basées sur Vue.js) :

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

Copier après la connexion

Ensuite, dans la balise de HTML Définissez un formulaire simple dans la balise :

<body>
  <div id="app">
    <el-form ref="form" :rules="rules" label-width="100px" style="max-width: 450px; margin: 50px auto;">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-button type="primary" @click="submitForm('form')">提交</el-button>
    </el-form>
  </div>
  
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          form: {
            username: '',
            password: '',
          },
          rules: {
            username: [
              { required: true, message: '用户名不能为空', trigger: 'blur' },
              { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' },
            ],
            password: [
              { required: true, message: '密码不能为空', trigger: 'blur' },
              { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
            ],
          },
        };
      },
      methods: {
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('表单校验通过，可以提交');
            } else {
              console.log('表单校验失败');
              return false;
            }
          });
        },
      },
    });
  </script>
</body>

Copier après la connexion

Dans le code ci-dessus, nous lions la valeur d'entrée du formulaire via la directive v-model, et lions les règles de vérification du formulaire via l'attribut :rules. Parmi eux, required: true indique les champs obligatoires, et min et max représentent la longueur minimale et maximale. required: true 表示必填项，min 和 max 代表最小和最大长度。

在 submitForm 方法中，我们调用了 $refs[formName].validate 方法进行表单校验。校验成功时，会弹出一个提示框。

提交表单
在Vue中，提交表单可以通过发送Ajax请求或调用后端API来实现。这里给出一个通过发送Ajax请求的示例代码：

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        form: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            { required: true, message: '用户名不能为空', trigger: 'blur' },
            { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
          ],
        },
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 表单校验通过，发送Ajax请求
            this.$http.post('/api/submit', this.form).then((response) => {
              console.log('提交成功');
            }).catch((error) => {
              console.log('提交失败');
            });
          } else {
            console.log('表单校验失败');
            return false;
          }
        });
      },
    },
  });
</script>

Copier après la connexion

在上述代码中，我们使用 Vue 提供的 $http 对象发送 Ajax 请求，将表单数据提交给后端的 /api/submit

Dans la méthode submitForm, nous appelons la méthode $refs[formName].validate pour la vérification du formulaire. Une fois la vérification réussie, une boîte de dialogue apparaîtra.

Soumettre un formulaire

Dans Vue, la soumission d'un formulaire peut être effectuée en envoyant une requête Ajax ou en appelant une API backend. Voici un exemple de code pour envoyer une requête Ajax :

rrreee

Dans le code ci-dessus, nous utilisons l'objet $http fourni par Vue pour envoyer la requête Ajax et soumettre les données du formulaire au /api/submit. 🎜🎜Résumé🎜À travers les exemples ci-dessus, nous pouvons voir qu'il est très simple de gérer la soumission de la somme de contrôle des entrées de formulaire dans Vue. Il nous suffit de définir les règles de vérification, d'appeler la méthode de vérification, puis d'effectuer le traitement correspondant en fonction des résultats de la vérification. Dans le même temps, nous pouvons également soumettre des données de formulaire en envoyant des requêtes Ajax ou en appelant des API back-end. 🎜🎜Bien sûr, le code ci-dessus n'est qu'un exemple simple, vous pouvez l'étendre et le modifier en fonction de vos besoins réels. J'espère que cet article pourra vous aider à gérer la vérification et la soumission de la saisie du formulaire dans Vue ! 🎜

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment gérer la vérification et la soumission de la saisie d'un formulaire dans Vue