vue 组件化（五）el-form之表单校验，以及corn 生成

element 表单是支持自定义校验规则的。

校验规则像图中所示添加，为了方便起见model的名称最好和rules的名称相同
我的rules 如下

      rules: {
        typeOneFromtime: [{ required: true, message: "时间不能为空", trigger: "change" }],
        typeOneTotime: [{ required: true, message: "请输入大于当前的日期", trigger: "change" }],
        typeOneDays: [{ required: true, message: "请输入大于0的数字", trigger: "blur" }],
        weekdays: [{ required: true, message: "请至少选择一个", trigger: "change" }],
        typeOndeWeeks: [{ required: true, message: "请输入大于0的数字", trigger: "blur" }],
        monthdays: [
          { required: this.ruleForm.monthdaysRadio == "2" ? false : true, message: "请选择第几天", trigger: "change" }
        ],
        months: [{ required: true, message: "请选择月份", trigger: "change" }],
        typeEndFromtime: [{ required: true, message: "请输入大于当前的日期", trigger: "change" }],
        typeEndTotime: [{ required: true, message: "时间不能为空", trigger: "change" }],
        // 自定义方法
        minxinValid: [{ validator: this.validtorDouble, message: "时间不能为空", trigger: "change" }]
      },

记住自定义的规则中，确保条件的每一个分支必须执行回调 callback()

    validtorDouble(rule, value, callback) {
      if (不成立) {
        callback(new Error("选项不能为空"));
      } else {
        callback();
      }
    },

表单中日期组件

<el-form-item class="two-form-item" label-width="100px" prop="typeOneTotime" v-if="towType == '7'">
              <el-date-picker
                :picker-options="pickerOptions"
                v-model="ruleForm.typeOneTotime"
                type="date"
                size="medium"
                value-format="yyyy-MM-dd"
                placeholder="年-月-日"
              >
              </el-date-picker>
            </el-form-item>

:picker-options=“pickerOptions” 设置日期范围

// 大于当前日期
  pickerOptions: {
    disabledDate(time) {
      let _now = Date.now();
      return time.getTime() + 3600 * 1000 * 24 < _now;
    }
  }

时间组件

<el-form-item label="时间" label-width="100px" prop="typeOneFromtime" v-if="towType == '7'">
       <el-time-picker size="medium" v-model="ruleForm.typeOneFromtime" placeholder="时:分:秒"> </el-time-picker>
  </el-form-item>

根据 日期选择器 以及时间选择器 获取 秒 分 时 日月年的方法

    getHourMinuteSecondMonthYear(data) {
      let newDate = {};
      let datetime = new Date(data.freq.startTime);
      let date = new Date(data.freq.startDate);
      newDate.h = datetime.getHours();
      newDate.mm = datetime.getMinutes();
      newDate.s = datetime.getSeconds();
      newDate.d = datetime.getDate();
      newDate.y = date.getFullYear();
      newDate.m = date.getMonth() + 1;
      return newDate;
    },

可以根据 上边获得的日期生成 corn 串
那么什么 corn 呢 ？ corn 共有7个字段

1.    Seconds
   

2.    Minutes
   

3.    Hours
   

4.    Day-of-Month
   

5.    Month
   

6.    Day-of-Week
   

7.    Year (可选字段)
   

8. 每个字段的值以及特殊字符
   字段名 允许的值 允许的特殊字符
   秒 0-59 , - * /
   分 0-59 , - * /
   小时 0-23 , - * /
   日 1-31 , - * ? / L W C
   月 1-12 or JAN-DEC , - * /
   周几 1-7 or SUN-SAT , - * ? / L C #
   年 (可选字段) empty, 1970-2099 , - * /

           “?”字符：表示不确定的值
   
           “,”字符：指定数个值
   
           “-”字符：指定一个值的范围
   
           “/”字符：指定一个值的增加幅度。n/m表示从n开始，每次增加m
   
           “L”字符：用在日表示一个月中的最后一天，用在周表示该月最后一个星期X
   
           “W”字符：指定离给定日期最近的工作日(周一到周五)
   
           “#”字符：表示该月第几个周X。6#3表示该月第3个周五
   

Cron表达式举例：

             每隔5秒执行一次：*/5 * * * * ?

             每隔5分钟执行一次：0 */5 * * * ?常用

             每天6点执行一次：0 0 6 * * ?

             每月1号凌晨6点执行一次：0 0 6 1 * ?

             每月最后一天23点执行一次：0 0 23 L * ?

             每周星期天凌晨1点实行一次：0 0 1 ? * L

             在26分、29分、33分执行一次：0 26,29,33 * * * ?

在线corn生成器 可以自己试试

上图是项目中拼接corn 的部分代码