Vue 制定日期选择器验证

Question

我一直在使用 Vue Formulate 库（非常棒）。

我需要用户只能选择从今天（含）开始的日期。

我正在使用“之后”默认值进行验证，但今天（当前日期）无效。换句话说，在选择今天的日期时，验证会开始，并且表格无法提交。

解决这个问题的最佳方法是什么？

https://codesandbox.io/s/vue-formulate-reproduction-template-forked-kmpgq?fontsize=14&hidenavigation=1&theme=dark

Answer 1

通过给 after 属性一个今天之前的日期值的一个小解决方法：

<template>
  <FormulateInput
    name="date"
    label="Date:"
    :validation="
      'bail|required|after:' + new Date(Date.now() - 24 * 60 * 60 * 1000)
    "
    :validation-messages="{ after: 'The date has to be today or later' }"
    type="date"
  />
</template>

https://codesandbox.io/s/vue-formulate-reproduction-template-forked-ky1hu?fontsize=14&hidenavigation=1&theme=dark

编辑：事实上，您也可以通过返回今天之前的日期来使用计算的属性来做到这一点。

Answer 2

验证后应由日期定义。这是通过计算属性计算今天的解决方案。 Codesandbox

<template>
  <FormulateInput
    name="date"
    label="Date:"
    :validation="'bail|required|after:' + today"
    :validation-messages="{ after: 'The date has to be today or later' }"
    type="date"
  />
</template>

<script>
export default {
  computed: {
    today() {
      return new Date().toLocaleDateString();
    },
  },
};
</script>

Vue 制定日期选择器验证

Vue Formulate Date Picker Validation

validation

vue.js

vue-formulate