【无标题】

最新推荐文章于 2025-08-09 21:35:33 发布

大树叶

最新推荐文章于 2025-08-09 21:35:33 发布

阅读量93

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/bigtree_3721/article/details/149119004

在vue3中，使用element-plus的el-form的rules来校验el-form的各个元素的输入，要求是rules里面要用写方法来验证
例子如下:

   1. 在el-form设置通过 设置 rules="formrules" 来指定form检验规则变量。
   
   <el-form
      :model="periodDialogRuleForm"
      ref="ruleFormRef"
      :rules="rules"
      label-position="right"
      label-width="auto"
    >

2. 然后在同一个vue文件中实现 formrules， 如下所示。用validator: 指定验证方法方法即可


const formrules = reactive<FormRules<PeriodDialogFormRuleRule>>({
  periodType: [
    { required: true, message: '请选择周期运行', trigger: 'change' },
    {
      validator: (rule, value, callback) => {
        if (periodDialogRuleForm.taskType === 1 && !value) {
          callback(new Error('请选择周期运行'))
        } else {
          callback()
        }
      },
      trigger: 'change',
    },
  ],
  periodValue: [
    { required: true, message: '请选择周期运行', trigger: 'change' },
    {
      validator: (rule, value, callback) => {
        if (
          periodDialogRuleForm.taskType === 1 &&
          (periodDialogRuleForm.periodType === 'week' ||
            periodDialogRuleForm.periodType === 'month') &&
          value.size === 0
        ) {
          callback(new Error('请选择周期运行'))
        } else {
          callback()
        }
      },
      trigger: 'change',
    },
  ],
  runTime: [
    {
      validator: (rule, value, callback) => {
        if (
          periodDialogRuleForm.taskType === 1 &&
          periodDialogRuleForm.periodType !== 'hour' &&
          value.size === ''
        ) {
          callback(new Error('请选择运行时间'))
        } else {
          callback()
        }
      },
      trigger: 'change',
    },
  ],
})