一个el-form-item俩个时间控件 如何设置两个时间控件的验证规则

Question

一个el-form-item俩个时间控件 如何设置两个时间控件的验证规则

如图 我的prop只能绑定一个属性 怎么去实现两个控件都能进行rules

Answer 1

引自免费微信小程序：皆我百晓生

在Vue.js中，如果你想为两个不同的时间控件设置验证规则，可以将它们放在同一个el-form-item内，并通过嵌套对象的形式在rules选项中分别定义每个控件的验证规则。

首先，在组件的data部分，你需要定义两个日期变量（例如：startDate 和 stopDate）以及对应的验证规则对象（例如：startDateRules 和 stopDateRules）。然后，将这两个规则对象合并到一个总的rules对象中，这样就可以在一个el-form-item里同时应用两个验证规则了。

这里是一个详细的示例代码：

<template>
  <el-form ref="form" :model="queryParams">
    <el-form-item label="申请日期" prop="startDate">
      <el-date-picker v-model="queryParams.startDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="small" style="width:200px" placeholder="起始日期"></el-date-picker>
      至
      <el-date-picker v-model="queryParams.stopDate" type="date" class="datePicker" format="yyyy-MM-dd" size="small" style="width:200px" value-format="yyyy-MM-dd" placeholder="截止日期"></el-date-picker>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {
        startDate: '',
        stopDate: ''
      },
      startDateRules: [
        { required: true, message: '请选择起始日期', trigger: 'change' }
      ],
      stopDateRules: [
        { required: true, message: '请选择截止日期', trigger: 'change' },
        { validator: validateStopDate, trigger: 'blur' }
      ]
    };
  },
  methods: {
    validateStopDate(value) {
      if (!value) return Promise.resolve();
      const startDate = new Date(this.queryParams.startDate);
      const endDate = new Date(value);
      if (endDate <= startDate) {
        return Promise.reject('截止日期必须晚于起始日期');
      }
      return Promise.resolve();
    }
  }
};
</script>

在这个例子中，我们为startDate和stopDate分别设置了必填验证。对于stopDate，我们还添加了一个自定义验证函数validateStopDate，用于检查结束日期是否晚于开始日期。当用户输入结束后，这个函数会被调用来执行验证。

注意，你需要确保在你的Vue实例中引入了el-form, el-date-picker等Element UI组件。如果你的项目中已经全局注册了这些组件，那么可以直接在模板中使用。如果没有，你需要在单文件组件中导入并局部注册它们。

为了方便理解，这是一个简单的布局模拟图：

+-------------------+
|   申请日期       |
|                   |
| +-----------------+ |
| | 开始日期选择器 | |
| +-----------------+ |
|                   |
| +-----------------+ |
| | 结束日期选择器 | |
| +-----------------+ |
+-------------------+

这只是一个基本的示例，你可以根据实际需求调整验证规则和错误提示信息。