菜单 搜索
首页 前端知识 Vue3 ElementPlus form表单动态生成校验实现

Vue3 ElementPlus form表单动态生成校验实现

2024-09-12 23:09:43 前端知识 前端哥 57 558 我要收藏

1. 背景

在使用Vue3和ElementPlus开发动态表单时，我们遇到了一些关于表单校验的挑战，特别是在动态添加表单项时如何正确应用校验规则而不触发全局校验。

2. 实现目标

  • 动态添加和删除考勤组（最多3组，至少1组）
  • 每组考勤时间包含开始时间、结束时间和休息时间
  • 新增考勤组时不触发全局校验
  • 确保新增的考勤组正确应用校验规则
  • 计算总工作时长

3. 核心实现

3.1 动态生成校验规则

const generateRules = () => {
  const baseRules = {
    name: [{ required: true, message: "请输入班次名称", trigger: "blur" }]
  };
  formModel.attendanceGroups.forEach((_, index) => {
    baseRules[`attendanceGroups.${index}.startTime`] = [
      { required: true, message: "请选择开始时间", trigger: "change" },
      { validator: validateAttendanceTime, trigger: "change" }
    ];
    // ... 其他字段的规则
  });
  return baseRules;
};

3.2 添加新考勤组

const handelAdd = async () => {
  if (formModel.attendanceGroups.length < 3) {
    // 暂时禁用表单的自动验证
    if (formRef.value) {
      formRef.value.validateDisabled = true;
    }

    const newIndex = formModel.attendanceGroups.length;
    formModel.attendanceGroups.push({
      // ... 新考勤组的初始数据
    });

    // 重新生成规则
    rules.value = generateRules();

    await nextTick();

    // 只对新添加的组应用校验规则
    if (formRef.value) {
      formRef.value.validateField([
        `attendanceGroups.${newIndex}.startTime`,
        `attendanceGroups.${newIndex}.endTime`
      ]);
    }

    // 重新启用表单的自动验证
    if (formRef.value) {
      formRef.value.validateDisabled = false;
    }
  }
};

3.3 html结构

    <div
          v-for="(group, index) in formModel.attendanceGroups"
          :key="index"
        >
          <span>第{{ index + 1 }}次</span>
          <el-row
            :gutter="20"
            style="width: 100%"
          >
            <el-col :span="18">
              <el-form-item
                :label="'开始时间'"
                :prop="`attendanceGroups.${index}.startTime`"
              >
                <el-time-picker
                  v-model="group.startTime"
                  clearable
                  format="HH:mm"
                  placeholder="开始时间"
                />
              </el-form-item>
              <el-form-item
                :label="'结束时间'"
                :prop="`attendanceGroups.${index}.endTime`"
              >
                <el-time-picker
                  v-model="group.endTime"
                  clearable
                  format="HH:mm"
                  placeholder="结束时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <div>
                <el-icon
                  v-if="index !== 0"
                  @click="handleClose(index)"
                >
                  <CircleClose />
                </el-icon>
                <el-checkbox
                  v-model="group.needClockIn"
                  :disabled="index === 0"
                  label="打卡"
                  size="large"
                />
                <el-checkbox
                  v-model="group.needClockOut"
                  label="打卡"
                  size="large"
                />
              </div>
            </el-col>
          </el-row>
          <el-form-item label="休息时间">
            <el-switch
              v-model="group.showRestTime"

              class="ml-2"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            />
          </el-form-item>
          <div v-if="group.showRestTime">
            <el-form-item label="休息开始">
              <el-time-picker
                v-model="group.restTime.startTime"
                :format="'HH:mm'"
                clearable
                placeholder="开始时间"
                value-format="HH:mm"
              />
            </el-form-item>
            <el-form-item label="休息结束">
              <el-time-picker
                v-model="group.restTime.endTime"
                :format="'HH:mm'"
                clearable
                placeholder="结束时间"
                value-format="HH:mm"
              />
            </el-form-item>
          </div>
        </div>

4. 关键点

  • 使用动态生成的校验规则，确保每个考勤组都有正确的校验规则
  • 在添加新考勤组时，暂时禁用表单的自动验证，避免触发全局校验
  • 只对新添加的考勤组应用校验规则，而不影响其他已存在的组
  • 使用nextTick确保DOM更新后再进行校验操作

5. 注意事项

  • 确保formRef正确绑定到el-form组件上
  • 在删除考勤组时也需要重新生成校验规则
  • 总工作时长的计算需要考虑休息时间

6. 总结

通过这种实现方式，我们成功解决了动态表单校验的问题，既保证了新增字段的校验规则生效，又避免了不必要的全局校验触发，提高了用户体验和表单的可用性。

完整代码如下：

<template>
  <el-pro-dialog
    :model-value="modelValue"
    :title="dialogType==='add'?'新增':'编辑'"
    class="completion-chart"
    width="600px"
    @closed="$emit('closed')"
    @update:model-value="(value:boolean) => $emit('update:modelValue',value)"
  >
    <div class="form-model">
      <span>注意：新增/修改班次规则对当天及历史考勤无影响！</span>

      <el-form
        ref="formRef"
        :model="formModel"
        :rules="rules"
        label-width="auto"
      >
        <el-form-item
          label="班次名称"
          prop="name"
        >
          <el-input v-model="formModel.name" />
        </el-form-item>
        <el-form-item label="上下班时间">
          <el-icon @click="handelAdd">
            <Plus />
          </el-icon>
        </el-form-item>
        <div
          v-for="(group, index) in formModel.attendanceGroups"
          :key="index"
        >
          <span>第{{ index + 1 }}次</span>
          <el-row
            :gutter="20"
            style="width: 100%"
          >
            <el-col :span="18">
              <el-form-item
                :label="'开始时间'"
                :prop="`attendanceGroups.${index}.startTime`"
              >
                <el-time-picker
                  v-model="group.startTime"
                  clearable
                  format="HH:mm"
                  placeholder="开始时间"
                />
              </el-form-item>
              <el-form-item
                :label="'结束时间'"
                :prop="`attendanceGroups.${index}.endTime`"
              >
                <el-time-picker
                  v-model="group.endTime"
                  clearable
                  format="HH:mm"
                  placeholder="结束时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <div>
                <el-icon
                  v-if="index !== 0"
                  @click="handleClose(index)"
                >
                  <CircleClose />
                </el-icon>
                <el-checkbox
                  v-model="group.needClockIn"
                  :disabled="index === 0"
                  label="打卡"
                  size="large"
                />
                <el-checkbox
                  v-model="group.needClockOut"
                  label="打卡"
                  size="large"
                />
              </div>
            </el-col>
          </el-row>
          <el-form-item label="休息时间">
            <el-switch
              v-model="group.showRestTime"

              class="ml-2"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            />
          </el-form-item>
          <div v-if="group.showRestTime">
            <el-form-item label="休息开始">
              <el-time-picker
                v-model="group.restTime.startTime"
                :format="'HH:mm'"
                clearable
                placeholder="开始时间"
                value-format="HH:mm"
              />
            </el-form-item>
            <el-form-item label="休息结束">
              <el-time-picker
                v-model="group.restTime.endTime"
                :format="'HH:mm'"
                clearable
                placeholder="结束时间"
                value-format="HH:mm"
              />
            </el-form-item>
          </div>
        </div>
        <el-form-item label="合计工作时长">
          {{ totalWorkDuration }}
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div
        style="text-align: center"
      >
        <el-button
          plain
          type="danger"
          @click="$emit('update:modelValue',false)"
        >
          取消
        </el-button>
        <el-button
          :loading="submitLoading"
          type="primary"
          @click="submit"
        >
          确认
        </el-button>
      </div>
    </template>
  </el-pro-dialog>
</template>

<script lang="ts" setup>
import {computed, nextTick, PropType, reactive, ref} from "vue";
import {FormInstance} from "element-plus";

const emit = defineEmits(["update:modelValue", "save", "closed"])
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
    default: false,
  },
  dialogType: {
    type: String as PropType<"add" | "detail">,
    required: true,
    default: "add",
  },
})
const formRef = ref<FormInstance>()
const formModel = reactive({
  name: "",
  attendanceGroups: [
    {
      startTime: "",
      endTime: "",
      needClockIn: true,
      needClockOut: true,
      showRestTime: false,
      restTime: {
        startTime: "",
        endTime: "",
      },
    }
  ],
})

const submitLoading = ref<boolean>(false)
const generateRules = () => {
  const baseRules: {} = {
    name: [{ required: true, message: "请输入班次名称", trigger: "blur", }],
  };
  formModel.attendanceGroups.forEach((_, index) => {
    baseRules[`attendanceGroups.${index}.startTime`] = [
      { required: true, message: "请选择开始时间", trigger: "change", },
      { validator: validateAttendanceTime, trigger: "change", }
    ];
    baseRules[`attendanceGroups.${index}.endTime`] = [
      { required: true, message: "请选择结束时间", trigger: "change", },
      { validator: validateAttendanceTime, trigger: "change", }
    ];
    baseRules[`attendanceGroups.${index}.restTime.startTime`] = [
      { validator: validateRestTime, trigger: "change", }
    ];
    baseRules[`attendanceGroups.${index}.restTime.endTime`] = [
      { validator: validateRestTime, trigger: "change", }
    ];
  });

  return baseRules;
};
const totalWorkDuration = computed(() => {
  let total = 0
  formModel.attendanceGroups.forEach(group => {
    if (group.startTime && group.endTime) {
      const start = new Date(`2000-01-01T${group.startTime}:00`)
      const end = new Date(`2000-01-01T${group.endTime}:00`)
      let duration = (end.getTime() - start.getTime()) / (1000 * 60 * 60)

      if (group.showRestTime && group.restTime.startTime && group.restTime.endTime) {
        const restStart = new Date(`2000-01-01T${group.restTime.startTime}:00`)
        const restEnd = new Date(`2000-01-01T${group.restTime.endTime}:00`)
        const restDuration = (restEnd.getTime() - restStart.getTime()) / (1000 * 60 * 60)
        duration -= restDuration
      }

      total += duration
    }
  })
  return total.toFixed(2)
})

function validateAttendanceTime(rule: any, value: string, callback: Function) {
  console.log(rule, value,"中心")
  const index = parseInt(rule.field.split(".")[1])
  const currentGroup = formModel.attendanceGroups[index]
  const nextGroup = formModel.attendanceGroups[index + 1]

  if (currentGroup.startTime && currentGroup.endTime) {
    if (currentGroup.startTime >= currentGroup.endTime) {
      callback(new Error("结束时间必须大于开始时间"))
    } else if (nextGroup && currentGroup.endTime > nextGroup.startTime) {
      callback(new Error("考勤时间不可交叉覆盖"))
    } else {
      callback()
    }
  } else {
    callback()
  }
}
// const rules = computed(() => generateRules());
const rules = ref(generateRules());
function validateRestTime(rule: any, value: string, callback: Function) {
  const [groupIndex, field] = rule.field.split(".").slice(1, 3)
  const group = formModel.attendanceGroups[parseInt(groupIndex)]

  if (!group.startTime || !group.endTime) {
    callback(new Error("请先选择上下班时间"))
  } else if (group.showRestTime && group.restTime.startTime && group.restTime.endTime) {
    if (group.restTime.startTime < group.startTime || group.restTime.endTime > group.endTime) {
      callback(new Error("休息时间需在考勤时间内"))
    } else if (group.restTime.startTime >= group.restTime.endTime) {
      callback(new Error("休息结束时间必须大于开始时间"))
    } else {
      callback()
    }
  } else {
    callback()
  }
}
const handelAdd = async () => {
  if (formModel.attendanceGroups.length < 3) {
    // 暂时禁用表单的自动验证
    if (formRef.value) {
      formRef.value.validateDisabled = true;
    }

    const newIndex = formModel.attendanceGroups.length;
    formModel.attendanceGroups.push({
      startTime: "",
      endTime: "",
      needClockIn: false,
      needClockOut: false,
      showRestTime: false,
      restTime: {
        startTime: "",
        endTime: "",
      },
    });

    // 重新生成规则
    rules.value = generateRules();

    await nextTick();

    // 只对新添加的组应用校验规则
    if (formRef.value) {
      formRef.value.validateField([
        `attendanceGroups.${newIndex}.startTime`,
        `attendanceGroups.${newIndex}.endTime`
      ]);
    }

    // 重新启用表单的自动验证
    if (formRef.value) {
      formRef.value.validateDisabled = false;
    }
  }
};





const handleClose = (index: number) => {
  if (formModel.attendanceGroups.length > 1) {
    formModel.attendanceGroups.splice(index, 1)
    // 触发规则重新计算
    rules.value = generateRules();

  }
}

const submit = async () => {
  // 实现表单提交和校验逻辑
  if (!formRef.value) return

  try {
    formRef.value.validate((valid, fields) => {
      console.log("验证结果:", valid, fields)
      if (valid) {
        console.log("验证通过", formModel)
      } else {
        console.log("验证失败", fields)
      }
    })

  } catch (error) {
    console.error("表单验证失败", error)
  }
}
</script>

转载请注明出处或者链接地址：https://www.qianduange.cn//article/18177.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

JSONObject.fromObject爆红问题解决

2024-10-15 23:10:08

3.1 requests与JSON基础

2024-10-15 23:10:08

使用fastJSON进行json格式的转换

2024-10-15 23:10:07

3D点云目标检测数据集标注工具 保姆级教程——CVAT （附json转kitti代码）

2024-10-15 23:10:16

JsonCpp--快速上手使用C 对json文件的读写(Linux)

2024-10-15 23:10:16

**探索数据之美 —— Onde：您的JSON文档编辑利器**

2024-10-15 23:10:15

React 安装(NPM)

2024-10-15 23:10:15

Django-NPM 教程：结合前端现代化工具于 Django 项目中

2024-10-15 23:10:15

react安装报错 npm ERR! code ETIMEDOUT npm ERR! errno ETIMEDOUT npm ERR! network request to

2024-10-15 23:10:14

ERESOLVE overriding peer dependency npm install错误

2024-10-15 23:10:14

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
3

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
4

vue使用datav echarts

2024-09-06 00:09:381000
5

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
6

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
7

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
8

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
9

npm的使用

2024-08-18 00:08:131000
10

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！