How to use the form validation function in Vue documentation

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>

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

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>

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>

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!