Analyse du code de cas d'utilisation de la vérification du formulaire VeeValidate dans le projet Vue

Cette fois, je vais vous apporter une analyse de code du cas d'utilisation de VeeValidate pour la vérification de formulaire dans le projet vue. Quelles sont les précautions lors de l'utilisation de VeeValidate pour la vérification de formulaire dans le projet vue. Voici les. cas réels, jetons un coup d'œil. Jetez un œil.

Qu'est-ce que VeeValidate :

VeeValidate est une bibliothèque de validation pour Vue.js. Elle possède de nombreuses règles de validation, et prendre en charge les règles personnalisées. Il est basé sur des modèles, il est donc similaire et familier à l'API de validation HTML5. Vous pouvez valider l'entrée HTML5 ainsi que les composants Vue personnalisés. Il est également construit en pensant à la localisation, en fait, nous avons environ 44 langues prises en charge et maintenues par de merveilleux membres de la communauté.

Cet article contient VeeValidate, y compris les applications suivantes :

1. Installation et utilisation de base

2. 🎜>

3. Règles personnalisées et messages d'erreur

4. Validation de l'entrée HTML5 et des composants Vue personnalisés

5. jetez d'abord un œil à l'effet page :

Si vous voulez voir l'effet gif, vous pouvez aller sur mon github (

https:// github.com/HongqingCao/My-Code/tree/master/VeeValidate) pour regarder et fournir des exemples de téléchargements de code source

.

Utilisation de VeeValidate Deux méthodes sont prises en charge : l'une est : NPM/yarn (npm install vee-validate --save), l'autre est : CDN.

Cet article est cité sous forme de CDN :

Remarque : quatre fichiers js sont introduits, les deux premiers sont brièvement discutés et les deux derniers sont vee-validata et zh_CN Fichier du pack de langue chinoise

partie de la page HTML :

Remarque : Il contient les points de connaissance VeeValidate suivants :

<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
  <script type="text/javascript" src="js/vue.min.js" ></script>
  <script type="text/javascript" src="js/vee-validate.min.js" ></script>
  <script type="text/javascript" src="js/zh_CN.js" ></script>

1 dans la balise input/textarea >. Attributs v-validate, data-vv-as, name

. (v-model est ici une liaison bidirectionnelle pour faciliter la transmission de ces paramètres à la requête d'interface, je n'en présenterai donc pas trop) 2.

v-show="errors.has('remark')" dans la balise de message d'erreur

et **{{ error.first('remark') }}**

<p class="enroll" id="recommend-box">
        <p class="title">请填写您要荐购的书籍信息：</p>
        <p class="content">
          <p class="info infoa">
            <p class="group-input">
              <span class="a">书 名：</span>
              <input v-model="title" v-validate="&#39;required&#39;" data-vv-as="书名" type="text" name="title" placeholder="请输入推荐书名" />
            </p>
            <p class="errors" v-show="errors.has(&#39;title&#39;)" v-cloak>{{ errors.first('title') }}</p>
          </p>
          <p class="info infoa">
            <p class="group-input">
              <span class="a">作 者：</span>
              <input v-model="author" v-validate="&#39;required&#39;" data-vv-as="作者" type="text" name="author" placeholder="请输入作者" />
            </p>
            <p class="errors" v-show="errors.has(&#39;author&#39;)" v-cloak>{{ errors.first('author') }}</p>
          </p>
          <p class="info infoa">
            <p class="group-input">
              <span class="a">出版社：</span>
              <input v-model="publisher" v-validate="&#39;required&#39;" data-vv-as="出版社" type="text" name="publisher" placeholder="请输入出版社" />
            </p>
            <p class="errors" v-show="errors.has(&#39;publisher&#39;)" v-cloak>{{ errors.first('publisher') }}</p>
          </p>
          <p class="info infob">         
            <p class="group-input">
              <span class="a">出版年：</span>
              <input v-model="pubYear" v-validate="&#39;required|pubYear|digits:4&#39;" data-vv-as="出版年" type="text" name="pubYear" placeholder="请输入出版年" />
            </p>
            <p class="errors" v-show="errors.has(&#39;pubYear&#39;)" v-cloak>{{ errors.first('pubYear') }}</p>
          </p>
          <p class="info infob">
            <p class="group-input">
              <span class="a">语言类型：</span>
              <input v-model="type" v-validate="&#39;required&#39;" data-vv-as="语言类型" type="text" name="type" placeholder="语言类型" />
            </p>
            <p class="errors" v-show="errors.has(&#39;type&#39;)" v-cloak>{{ errors.first('type') }}</p>
          </p>
          <p class="info infob">
            <p class="group-input">
              <span class="a">ISBN号：</span>
              <input v-model="isbn" v-validate="&#39;required|isbn&#39;" data-vv-as="ISBN号" type="text" name="isbn" placeholder="ISBN号" />
            </p>
            <p class="errors" v-show="errors.has(&#39;isbn&#39;)" v-cloak>{{ errors.first('isbn') }}</p>
          </p>
          <p class="info infob more">
            <p class="group-input">
              <span class="a">推荐理由：</span>
              <textarea v-model="remark" v-validate="&#39;max:200&#39;" data-vv-as="推荐理由" type="text" name="remark" placeholder="请输入推荐理由"></textarea>
            </p>
            <p class="errors" v-show="errors.has(&#39;remark&#39;)" v-cloak>{{ errors.first('remark') }}</p>
          </p>
           <p class="info info-btn">
             <p class="btton" @click="validateBeforeSubmit()">提交</p>
           </p>
         </p>
      </p>

v-validate :

directive v-validate ajouté à Validez l'entrée et assurez-vous que votre entrée possède l'attribut de nom utilisé pour générer le message d'erreur. La directive reçoit ensuite une Rulesstring contenant une liste de règles de validation séparées par un tube '|'. Par exemple, pour la vérification de l'

année de publication

ci-dessus, utilisez obligatoire. Cette option est obligatoire, et

pubYear

indique que le champ doit être au format année (de). le cours ici est personnalisé), chiffres : 4, la longueur du numéro est 4. Pour combiner ces deux règles, nous spécifions la valeur de l'expression v-validate pour la valeur de chaîne requise|pubYear|digits:4. data-vv-as : Lorsqu'un message d'erreur est généré pour cette entrée, il utilisera cette valeur data-vv-as au lieu du nom réel du champ , les invites d'erreur par défaut sont toutes en anglais. Si vous définissez cette option, le nom du champ d'invite d'erreur affichera la valeur data-vv-as

v-show="errors.has('remark'<.>)

L'étiquette d'invite d'erreur par défaut n'est pas chargée

errors.first('remark')

Obtenez les premières informations sur le courant remarque Message d'erreur

partie js :

D'accord, lisons ce code ensemble

Commentaire : Ceci La signification du le code ci-dessus est 1. Modifiez l'environnement linguistique de zh_CN midi Si vous ne modifiez pas l'invite par défaut est l'anglais 2. Installez le plug-in VeeValidate, qui peut également être compris comme une initialisation

Remarque. : Modifiez l'invite par défaut dans le code ci-dessus, l'attribut name ne peut pas être vide, c'est-à-dire le jugement non vide des éléments requis

<script type="text/javascript">
    var IndexPage = "http://localhost:8080/xxxx.html"
    var AuthCode = "12131";
    $(function () {
      recommend(AuthCode);
    })
    VeeValidate.Validator.localize('zh_CN');
    Vue.use(VeeValidate);
    VeeValidate.Validator.localize({
      zh_CN: {
        messages: {
          required: function (name) { return name + '不能为空' },
        }
      }
    })
    VeeValidate.Validator.extend('isbn',{
      getMessage: function () { return " 请输入正确格式的isbn号" },
      validate: function (value) { return /^[\d-]*$/.test(value);}
    })
    VeeValidate.Validator.extend('pubYear', {
      getMessage: function () { return " 请输入正确的年份" },
      validate: function (value) { return /^(19|20)\d{2}$/.test(value); }
    })
    function recommend(AuthCode) {
      var classList = new Vue({
        el: '#recommend-box',
        data: function () {
          return {
            title: "",
            author: "",
            publisher: "",
            pubYear: "",
            type: "",
            remark: "",
            isbn: ""
          }
        },
        methods: {
          validateBeforeSubmit() {
            this.$validator.validateAll().then((result) => {
              if (result) {
                $.ajax({
                  url: '/xxxx',
                  data: {
                    Request: "xxxxx",
                    title: this.title,
                    author: this.author,
                    publisher: this.publisher,
                    pubYear: this.pubYear,
                    type: this.type,
                    remark: this.remark,
                    isbn: this.isbn,
                    certId: AuthCode
                  },
                  type: 'POST',
                  dataType: "json",
                  success: function (data) {
                    var msg = data.msg;
                    alert(msg);
                    window.location.href = IndexPage;
                  }
                });
                return;
              }
              alert("请输入完整推荐信息！")
            });
          }
        }
      })
    }
  </script>

Remarque : le code ci-dessus modifie la règle personnalisée getMessage : Valider l'invite : Il s'agit d'une règle de correspondance, généralement régulière.

VeeValidate.Validator.localize('zh_CN');
    Vue.use(VeeValidate);

Remarque : le code ci-dessus crée un événement de bouton de soumission, surveille si les options sont remplies normalement et implémente la vérification

Un cas complet de demande de vérification a été expliqué ici. Les amis peuvent l'appliquer dans leurs propres projets en fonction de leur situation réelle. Si vous avez besoin d'en savoir plus, vous pouvez vous rendre sur le site officiel https://baianat. /vee-validate/guide/.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

propriétés calculées de vue et analyse du code de cas d'écoute

routeur de version vue-router3.0 Quoi. à faire si push ne parvient pas à rafraîchir la page

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!