VeeValidate form verification use case code analysis in vue project

This time I will bring you VeeValidate's use case code analysis for form verification in the vue project. What are the precautions for using VeeValidate for form verification in the vue project. The following is a practical case. Let's take a look. take a look.

What is VeeValidate:

VeeValidate is a verification library for Vue.js. It has many validation rules, and Support custom rules. It's based on templates, so it's similar and familiar to the HTML5 validation API. You can validate HTML5 input as well as custom Vue components. It's also built with localization in mind, in fact we have around 44 languages ​​supported and maintained by wonderful community members.

This article contains VeeValidate including the following applications:

1. Basic installation and use

2. Localization support

3. Custom rules and error messages

4. Validation of HTML5 input and custom Vue components

5. Unified submit button processing

Let’s take a look at the page effect first:

If you want to see the gif effect, you can go to my github (https://github.com/ HongqingCao/My-Code/tree/master/VeeValidate) to watch and provide example source code downloads. Let’s step into the topic:

Basic installation and use

Usage of VeeValidate Two methods are supported: one is: NPM/yarn (npm install vee-validate --save), the other is: CDN.

This article is quoted in the form of CDN:

<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>

Note: Four js files are introduced. The first two are briefly discussed, and the latter two are vee-validata and zh_CN Chinese language package. File

html page part:

<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>

Note: This contains the following VeeValidate knowledge points:

1. v-validate in the input/textarea tag , data-vv-as, name attribute. (v-model is a two-way binding here to facilitate passing these parameters to the interface request, so I won’t introduce too much) 2. v-show="errors.has('remark')" in the error message tag and **{{ errors.first('remark') }}**

v-validate:

v-validate directive is added to the Validate the input and make sure your input has the name attribute used to generate the error message. The directive is then passed a rulesstring containing a list of validation rules separated by a pipe '|'. For example, for the Publication Year copy verification above, use required This option is required, pubYear to indicate that the field must be in the year format (of course here is customized), digits: 4, the number length is 4. To combine these two rules, we specify the value of the v-validate expression with the string value required|pubYear|digits:4.

data-vv-as:

When any error message is generated for this input, it will use that data-vv-as value instead of the actual field name , the default error prompts are all in English. If you set this, the error prompt field name will prompt data-vv-as value

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

The default error prompt label is not loaded

errors.first('remark')

Get the first information about the current remark Error message

js part:

<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>

Okay, let’s read this code together

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

Comment: The meaning of the above code Yes 1. Change to the language environment of zh_CN noon. If you do not change the default prompt is English 2. Install the VeeValidate plug-in, which can also be understood as initialization

VeeValidate.Validator.localize({
      zh_CN: {
        messages: {
          required: function (name) { return name + '不能为空' },
        }
      }
    })

Note: The above code changes the default prompt, and the name attribute cannot be added. Empty, that is, the non-empty judgment of required items

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); }
    })

Comment: Modify the custom rule getMessage in the above code: prompt. validate: It is the matching rule, usually regular.

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

Comment : The above code creates a submit button event, monitors whether the options are filled in normally, and implements verification

A complete verification application case has been explained here. Friends can apply it in their own projects according to their actual situation. If you need to learn more, you can go to the official website https://baianat. github.io/vee-validate/guide/.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

vue computed properties and listener case code analysis

##vue-router3.0 version router. What to do if push cannot refresh the page

The above is the detailed content of VeeValidate form verification use case code analysis in vue project. For more information, please follow other related articles on the PHP Chinese website!