Vee Validate 自定义跨域规则，比较两个时间字符串

Question

我在 vue 的 buefy 表单中有两个时间字符串，我想根据第一个验证第二个，只输入不超过一小时的差异。我的字段粒度为毫秒。

我的脚本

import { Validator } from 'vee-validate';

//Cross-field Rules
Validator.extend('isOneHour', (value, [otherValue]) => {
  function toSeconds(time_str) {
    // Extract hours, minutes and seconds
    var parts = time_str.split(':');
    var mili = time_str.split('.')
    // compute  and return total seconds
    return parts[0] * 3600 + // an hour has 3600 seconds
      parts[1] * 60 +   // a minute has 60 seconds
      +parts[2]        // seconds
      + mili[0] / 1000;        //miliseconds

  }
  console.log(value, otherValue); // out
  var difference = Math.abs(toSeconds(value) - toSeconds(otherValue));


  return difference <= 3600;
}, {
    hasTarget: true
  });

我的模板：

<b-input
            @keyup.native.enter="getData()"
            editable
            :value="startTime"
            @change.native="startTime = $event.target.value"
            placeholder="ex. 11:22:00.000"
            icon="clock"
            v-mask="'##:##:##.###'"
            name="startTime"
            ref="endTime"
          ></b-input>
<b-input
            editable
            name="endTime"
            :value="endTime"
            @change.native="endTime = $event.target.value"
            placeholder="ex. 11:25:30.450"
            icon="stopwatch"
            @keyup.native.enter="getData()"
            v-mask="'##:##:##.###'"
            v-validate="'isOneHour:endTime'"
          ></b-input>

这段代码不起作用，它会创建一个死循环，这将导致应用程序崩溃。它在以下之前工作： var difference = Math.abs(toSeconds(value) - toSeconds(otherValue));

我的控制台错误是：TypeError: time_str.split is not a function

我做错了什么？

Answer 1

所以！问题是我在 Vee Validate 上的 events 设置为“”，在我将其设置为 "blur" 后触发了验证。虽然错误来自 error.first('symbol_input)，但根据我的 errorBagName 应该是 vErrors.first('symbol_input')。如果有人像我一样被困在这个问题上，也许这个答案就是他们出错的地方。

Vee Validate 自定义跨域规则，比较两个时间字符串

Vee Validate custom cross-field rule, comparing two time strings

javascript

vue.js

vee-validate