Comment utiliser VeeValidate pour effectuer la fonction de vérification de formulaire dans le projet Vue

Cette fois, je vais vous montrer comment utiliser VeeValidate pour effectuer une vérification de formulaire dans le projet vue. Quelles sont les précautions pour utiliser VeeValidate pour effectuer une vérification de formulaire dans le projet vue. Voici les cas pratiques. Jetons un coup d'oeil.

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 : C'est une règle d'appariement, généralement régulière

.

validateBeforeSubmit() {
   this.$validator.validateAll().then((result) => {
        if (result) {
           //这里写具体的接口请求
            alert("推荐成功！")
           return;
          }
           alert("请输入完整推荐信息！")
        }
     }

注释：上代码创建一个提交按钮事件，监听是否正常填写选项，实现校验

一个完整的校验应用案例到这里已经讲解的差不多了，小伙伴们可以根据自己的实际情况应用在自己的项目中，如果需要深入了解，可以移步到官网https://baianat.github.io/vee-validate/guide/。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何操作Vue内使用vee-validate

Node.js笔记process模块使用详解

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!