项目中使用了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();
}
页面效果:
简单快捷!
都是小把戏,大牛勿喷!
我承认,我以前都依赖社区成长,从没贡献,现在我也为社区做点贡献,仅此而已!