Home Web Front-end Vue.js How to use the form validation function in Vue documentation

How to use the form validation function in Vue documentation

Jun 20, 2023 pm 11:25 PM
vue form validation Function usage

Vue is a progressive JavaScript framework for building user interfaces. The focus of Vue is its simplicity and flexibility, which can be used in almost any project. As front-end developers, we often need to use functions in form validation. The Vue documentation provides some form validation functions, which are very practical and can help developers complete form validation more efficiently. This article will introduce how to use the form validation function in the Vue document.

First, we need to use v-model to bind the value of the form field in the Vue template. For example, the following code uses v-model to bind the value of an input box:

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

In the Vue documentation, the form validation function is included in Vue's instance method $validator. To use the form validation function, we need to first introduce the VeeValidate plug-in through Vue.use(VeeValidate), which is the officially recommended form validation plug-in for Vue.

After introducing VeeValidate, we can call the $validator method in the life cycle of the Vue instance, such as in the created() method, so that when the Vue instance is Initialization is done when created.

<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}不能为空`,
      },
    });
  }
}
Copy after login

In the above code, in the created() method, we use the this.$validator.localize() method to set the language of the validator to Chinese, and defines a custom error message. The required here is a default VeeValidate rule, which indicates that this field is required. In this example, the custom error message is "Username cannot be empty."

Now, we define a custom VeeValidate rule checkUsernameAvailable, in this case, it is used to check whether the username is available. In this rule, we have access to the value bound to the input box, and then we can use the Axios request POST method to send that value to the server. If the returned result is a data status code of 200, it means that the username is available, otherwise it means that the username is not available.

<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>
Copy after login

In the above code, we define a validation rule with a custom function checkUsernameAvailable, which uses asynchronous/await to wait for Axios' POST method response. If the status code in the response is 200, true is returned, otherwise false is returned.

Finally, we need to bind this validation rule to the HTML form. Add the data-vv-validate attribute to the form element. This tells Vue Validator to start validating the form. Then, we add custom rules v-validate="{ rules: { checkUsernameAvailable: true } }" in the form elements that require validation. This tells Vue Validator to use our custom validation rules.

<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>
Copy after login

In the above code, we added an error message in the input box v-show="errors.has('username')", when the error message is not empty The message will be displayed.

Now, we have completed the creation and binding of custom validation rules. If the value in the username input box is available on the server side, the form submits the data, otherwise Vue Validator will display a custom error message.

Overall, Vue Validator is a very powerful and easy-to-use form validation plugin. Vue provides an excellent platform for front-end developers to quickly develop form validation. The use of Vue Validator is easy to understand and can greatly improve development efficiency.

The above is the detailed content of How to use the form validation function in Vue documentation. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article

Hot Article

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use echarts in vue How to use echarts in vue May 09, 2024 pm 04:24 PM

How to use echarts in vue

The role of export default in vue The role of export default in vue May 09, 2024 pm 06:48 PM

The role of export default in vue

How to use map function in vue How to use map function in vue May 09, 2024 pm 06:54 PM

How to use map function in vue

The difference between event and $event in vue The difference between event and $event in vue May 08, 2024 pm 04:42 PM

The difference between event and $event in vue

The role of onmounted in vue The role of onmounted in vue May 09, 2024 pm 02:51 PM

The role of onmounted in vue

The difference between export and export default in vue The difference between export and export default in vue May 08, 2024 pm 05:27 PM

The difference between export and export default in vue

What are hooks in vue What are hooks in vue May 09, 2024 pm 06:33 PM

What are hooks in vue

Onmounted in vue corresponds to which life cycle of react Onmounted in vue corresponds to which life cycle of react May 09, 2024 pm 01:42 PM

Onmounted in vue corresponds to which life cycle of react

See all articles