• iview TimePicker 时间验证问题


    1.选择时间范围的时候

    //此处是循环表单,v-for = item in objArr
    objArr: [
            {
              id: 1,
              pattern: "白天模式",
              upTime: "08:00",
              downTime: "18:00",
              notificationMethod: 1,
              modelUrgency: ["1", "2", "3", "4"],
              time: ["08:00", "18:00"],
            },
            {
              id: 2,
              pattern: "夜间模式",
              upTime: "18:01",
              downTime: "07:59",
              notificationMethod: 2,
              modelUrgency: ["3", "4"],
              time: ["18:01", "07:59"],
            },
          ],

    <
    FormItem label="模式时间:" :prop="`data[${index}].time`" :rules="ruleValidate.time" > <TimePicker type="timerange" format="HH:mm" placeholder="选择时间" separator="~" v-model="item.time" @on-change="changeTime(index, $event)" ></TimePicker> </FormItem>
    //验证rules
    time: [ { required:
    true, type: "date", // message: "请选择时间", validator: validateTime, trigger: "change", }, ],
    //验证方法 validateTime
    const validateTime = (rule, value, callback, index) => {
          // if (!value) {
          //   return callback(new Error("请选择时间"));
          // } else {
          //   callback();
          // }
          //时间为数组处理-time
          if (!value) {
            return callback(new Error("请选择时间"));
          } else {
            //时间为数组处理
            // console.log("value11111", value);
            value.map((item) => {
              if (!item) {
                return callback(new Error("请选择时间"));
              }
            });
            callback();
          }
        };

    2.一般选择的时候

    <FormItem
              label="模式开始时间:"
              :prop="`data[${index}].upTime`"
              :rules="ruleValidate.upTime"
            >
              <TimePicker
                type="time"
                format="HH:mm"
                placeholder="选择时间"
                clearable
                v-model="item.upTime"
              ></TimePicker>
            </FormItem>
    
            <FormItem
              label="模式结束时间:"
              :prop="`data[${index}].downTime`"
              :rules="ruleValidate.downTime"
            >
              <TimePicker
                type="time"
                format="HH:mm"
                placeholder="选择时间"
                clearable
                v-model="item.downTime"
              ></TimePicker>
            </FormItem>

    const validateTime = (rule, value, callback, index) => { if (!value) { return callback(new Error("请选择时间")); } else { callback(); } //时间为数组处理-time // if (!value) { // return callback(new Error("请选择时间")); // } else { // //时间为数组处理 // // console.log("value11111", value); // value.map((item) => { // if (!item) { // return callback(new Error("请选择时间")); // } // }); // callback(); // } };
     upTime: [
              {
                required: true,
                type: "date",
                // message: "请选择时间",
                validator: validateTime,
                trigger: "change",
              },
            ],
            downTime: [
              {
                required: true,
                type: "date",
                // message: "请选择时间",
                validator: validateTime,
                trigger: "change",
              },
            ],
  • 相关阅读:
    ros论坛
    python--dict和set类型--4
    python--条件判断和循环--3
    python--list和tuple类型--2
    Unicode与UTF-8互转(C语言实现)
    spring mvc 返回JSON数据
    值得学习的C语言开源项目和库
    mudos源码分析
    Freemarker使用总结
    Maven详解
  • 原文地址:https://www.cnblogs.com/Byme/p/14366902.html
Copyright © 2020-2023  润新知