在Vue.js中使用v-validate验证日期

import { Validator } from 'vee-validate';

export default {
  data() {
    return {
      rules: {
        date: {
          format: 'yyyy-MM-dd',
          required: true,
          date_format: 'yyyy-MM-dd',
        },
      },
    };
  },
  mounted() {
    Validator.localize('en');
    Validator.extend('date_format', {
      validate: (value) => {
        const regex = /^\d{4}-\d{2}-\d{2}$/;
        return regex.test(value);
      },
      message: 'The {_field_} field must be in the format yyyy-MM-dd.',
    });
  },
};

<template>
  <div>
    <input v-model="date" v-validate="'date'" :class="{'is-invalid': errors.has('date')}">
    <span v-show="errors.has('date')" class="error">{{ errors.first('date') }}</span>
  </div>
</template>

export default {
  methods: {
    submitForm() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          // 表单验证通过，执行提交逻辑
        }
      });
    },
  },
};