vue2 使用form表单校验输入时的日期格式

在 Vue2 中使用表单校验需要借助第三方库，比如 VeeValidate。对于日期格式，可以使用 VeeValidate 提供的 date 校验规则。

首先需要安装 VeeValidate：`npm install vee-validate --save`

然后在 Vue 的入口文件中引入和使用 VeeValidate：

import Vue from 'vue'
import VeeValidate from 'vee-validate'

Vue.use(VeeValidate)

接着在模板中设置表单项的校验规则：

<template>
  <div>
    <form @submit.prevent="onSubmit" v-validate>
      <div>
        <label for="birthday">生日</label>
        <input type="text" name="birthday" v-model="birthday" v-validate="'date'" />
        <span v-show="errors.has('birthday')">{{ errors.first('birthday') }}</span>
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      birthday: ''
    }
  },
  methods: {
    onSubmit() {
      // 表单提交逻辑
    }
  }
}
</script>

这里设置了一个生日的输入框，并使用了 VeeValidate 提供的 date 校验规则。在模板中使用 `v-show` 和 `errors.has()` 来判断是否有校验错误，并使用 `errors.first()` 来获取第一个错误信息。

需要注意的是，由于 VeeValidate 是基于 HTML5 的表单验证机制实现的，所以需要设置 `type="text"`，而不是 `type="date"`，否则在不同浏览器下可能会有不同的表现。同时，由于日期格式也会因地区而异，建议在输入框中添加提示信息，如“请输入 YYYY-MM-DD 格式的日期”。