前端Vue3+element-plus表单输入框实现Cron表达式校验

原创已于 2023-09-21 16:42:42 修改 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #vue3 #element-plus #Cron表达式

于 2023-09-21 16:38:54 首次发布

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue3项目中通过cron-validator库验证Cron表达式，包括安装、使用方法，以及自定义配置如支持秒、月份等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面如下：

本来想手写正则表达式校验，结果发现很麻烦，cron表达式组成如下：

开发使用框架为vue3+element-plus，于是选择cron-validator依赖。使用步骤如下：

1、通过npm install cron-validator命令安装：

2、可以通过package.json文件中看到，已安装成功。

3、在你需要校验的组件中，通过import { isValidCron } from 'cron-validator'导入依赖：

4、使用，上一步从’cron-validator’导入{ isValidCron }，就可以使用isValidCron('* * * * *')进行判断，返回boolean类型，默认不支持秒和年字段，因为这两个字段在 cron 表达式中较为不常见：

if (isValidCron('* * * * *')) {
    // Do something
}

5、但是由于用户的使用习惯不同，你可能需要开启其他的配置，比如需要支持秒，那就需要设置seconds为true来开启支持，如果设置为false，则保持不支持。下面代码中，列举了四个其他开启配置项，可通过阅读代码中的注释部分来理解。

const rules = reactive<FormRules<RuleForm>>({
    ...
    cronExpression: [
      { required: true, message: '请输入Cron表达式', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          // seconds可以通过seconds在选项中将标志传递为 true来启用对秒的支持(例:* * * * * *);
          // alias启用alias对月份和工作日的支持(例:* * * * mon);
          // allowBlankDay可以启用该标志以使用?符号将天或工作日标记为空白(例:* * * * ?);
          // allowSevenAsSunday可以启用该标志以支持数字 7 作为星期日(例:* * * * 7);
          const isOk = isValidCron(value, { 
            seconds: true, 
            alias: true, 
            allowBlankDay: true, 
            allowSevenAsSunday: true 
          });
          if (!isOk) {
            callback(new Error('请输入可用的Cron表达式'));
          } else {
            callback();
          }
        },
        trigger: 'blur',
      },
    ]

})