antd 验证cron表达式

项目中使用了quartz，前端需要输入cron表达式并做验证（后端验证很方便，直接用CronExpression.isValidExpression(cronStr)验证即可），现有网上的资料，要么求大虾做cron的超强正则，要么写了一大堆js来验证，好崩溃。

研究了下，发现用cron-parser结合antd的自定义验证很方便就完成验证了，几个所需的资料如下：

1、cron-parser的官文https://www.npmjs.com/package/cron-parser（安装、demo）

2、antd官文form验证部分https://ant.design/components/form-cn/（页面中搜“validator”）

思路：

写一个验证函数，让cron-parser去转换，如果 catch，则填充验证函数的callback("验证提醒文字")：

代码：

<FormItem key="cronExpression" labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="时间策略">
  {form.getFieldDecorator('cronExpression', {
    rules: [
      { required: true, message: '时间策略不能为空！' },
      { validator: (rule, value, callback) => this.handleCronValidate(rule, value, callback) },
      ],
    initialValue: formVals.cronExpression,
  })(<Input placeholder="请输入" />)}
</FormItem>

函数：

handleCronValidate=(rule,value,callback)=>{
  if(!!value){
    let parser=require('cron-parser');
    try{
      let interval=parser.parseExpression(value);
      console.log("cronDate:",interval.next().toDate());
    } catch (e) {
      callback("非Cron表达式格式，请检查！"+e.message);
    }
  } else {
    callback("时间策略不能为空！");
  }
  callback();
}

页面效果：

antd 验证cron表达式

简单快捷！

都是小把戏，大牛勿喷！

我承认，我以前都依赖社区成长，从没贡献，现在我也为社区做点贡献，仅此而已！

antd 验证cron表达式

相关推荐