• If you want to study in depth, you can go to the website VeeValidate official website

Start by downloading the relevant dependency packages

npm install vee-validate –save

Importing related components from dependency packages and mounting them onto Vue components.

import { ValidationProvider, ValidationObserver, extend } from "vee-validate";
import { required } from "vee-validate/dist/rules"; 
import validate from "./validate.js";// Self-defined verification script
/* A single ValidationProvider can be used to complete the ValidationProvider, but a combination of ValidationObserver and ValidationProvider can be used to extend the ValidationProvider. You can either add custom methods or override existing methods in dependencies, such as required*/ in this article
extend("required", {
  ...required,
  message: "This is required.".// Customize the verification failure prompt statement
});
extend("veePositiveInteger", {
  validate: validate.veePositiveInteger,
});// User-defined verification method

// Local registration is possible
new Vue({ el: '#app'.components: { ValidationProvider, ValidationObserver } })
// Or global registration
Vue.component('ValidationProvider',ValidationProvider)
Vue.component('ValidationObserver',ValidationObserver)
Copy the code

We’re all set and ready to start checking

Here’s an example

./validate.js:

let veePositiveInteger = (value) = > {
  let reg = / ^ (1-9] [0-9] * $/; // A positive integer that starts with a non-zero number
  if (value) {
    if (reg.test(value)) {
      return true;
    } else {
      return "Please enter a positive integer"; }}else {
    return "Can't be empty."; }};let veePositiveNumber = (value) = > {
  let reg = / ^ [+] {0, 1} (\ d +) $| ^ [+] {0, 1} (\ d + \ \ d +) $/; // Positive numbers, including decimals
  if (value) {
    if (reg.test(value)) {
      return true;
    } else {
      return "Please enter a positive number"; }}else {
    return "Can't be empty."; }};export default {
  veePositiveInteger,
  veePositiveNumber,
};
Copy the code

Related Vue pages

<template>
  <div>
    <ValidationObserver ref="observe">
      <ValidationProvider rules="required" v-slot="{ errors }">
        <el-checkbox-group v-model="checkedCities">
          <el-checkbox v-for="city in cities" :label="city" :key="city">{{
            city
          }}</el-checkbox>
        </el-checkbox-group>
        <p class="validate-span">{{ errors[0] }}</p>
      </ValidationProvider>
      <ValidationProvider rules="required" v-slot="{ errors }">
        <el-select
          v-model="value1"
          multiple
          placeholder="Please select"
          :class="{ 'error-txt': errors[0] }"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <p class="validate-span">{{ errors[0] }}</p>
      </ValidationProvider>
    </ValidationObserver>
    <div>
      <el-button @click="validateClick">check</el-button>
    </div>
  </div>
</template>

<script>
import { ValidationProvider, ValidationObserver, extend } from "vee-validate"; // Customize the verification method
import { required } from "vee-validate/dist/rules";
extend("required", {
  ...required,
  message: "This is required."});export default {
  components: {
    ValidationProvider,
    ValidationObserver,
  },
  data() {
    return {
      value1: [].options: [{value: "Option 1".label: "Golden cake"}, {value: "Option 2".label: "Double skin milk"}, {value: "Option 3".label: Oyster omelet}, {value: "Option 4".label: "Dragon beard noodles"}, {value: "Option 5".label: "Peking Duck"],},checkedCities: [].cities: ["Shanghai"."Beijing"."Guangzhou"."Shenzhen"]}; },methods: {
    validateClick() {
      this.$refs.observe.validate().then((res) = > {
        console.log("validate === ", res); }); ,}}};</script>

<style lang="less" scoped>
.validate-span {
  font-size: 12px;
  color: tomato;
}
/deep/.el-select.error-txt .el-input__inner {
  border: 1px solid tomato ! important;
}
</style>

Copy the code

Warning of detours: For mandatory verification, you are advised to modify your own custom content based on the required component on the official website. Custom verification functions can perform mandatory verification on data of simple types. However, it is difficult for data of reference types to perform mandatory verification on custom verification functions.