el-form表单校验与distpicker配合使用

在Vue.js中，`el-form` 是Element UI库提供的用于构建表单的组件，而 `DatePicker`（通常写作 `el-date-picker`）是一个日期选择器。两者结合可以方便地实现在表单中对日期字段的验证。

当你需要在 `el-form` 中集成 `el-date-picker` 的时候，首先你需要安装并引入这两个组件：

npm install element-ui

然后在模板文件（如 .vue 文件）中，你可以这样配置：

<template>
  <el-form :model="form" ref="form">
    <el-form-item label="日期">
      <el-date-picker v-model="form.date" placeholder="选择日期"></el-date-picker>
      <el-form-error slot="help">请输入有效日期</el-form-error>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        date: ''
      }
    };
  },
  components: {
    'el-date-picker': {
      // 如果你是在非Vue CLI项目中，这里可能需要引入 DatePicker 组件
      // import DatePicker from 'element-ui/components/date-picker';
      // 或者如果你使用的是 Vue CLI，那么它应该已经自动导入了
      DatePicker: ElementUI DatePicker,
    },
  },
  methods: {
    validateDate(date) {
      // 这里可以根据实际需求编写日期有效性检查，例如检查是否为空、格式等
      if (!date || !/^\d{4}-\d{2}-\d{2}$/.test(date)) {
        this.$refs.form.validateField('date');
        return false;
      }
      return true;
    }
  },
  watch: {
    form: {
      handler(newVal, oldVal) {
        if (newVal.date && !this.validateDate(newVal.date)) {
          // 如果输入无效，触发错误校验
          this.$refs.form.resetFields();
        }
      },
      deep: true,
    },
  },
};
</script>

在上面的例子中，当用户填写完日期后，`validateDate` 方法会被调用，检查输入的日期是否合法。如果不合法，会触发错误提示，并且使用 `el-form-validateField` 方法来聚焦到该字段进行校验。