0

各位开发者您好。

我正在 vuejs 中开发一个蒙面的生日输入，需要检查日期现在是否为负 18 年，以检查我的用户是否可以购买酒精。

它工作得很好，但是当生日作为默认值传递到我的输入中时，我正在努力解决它，eq。它不会让我更新它...

我使用 VeeValidate ( VeeValidate ) 进行验证过程，使用 CleaveJs ( CleaveJS ) 进行屏蔽，使用 Date-fns ( Date-fns ) 进行约会实用程序。

这是我的代码：

以我的形式

<vv-form-mask-input
 id="birthday"
 label="birthday"
 name="birthday"
 v-model="birthday"
 required
 placeholder="JJ/MM/AAAA"
 :cleave="{date: true, datePattern: ['d', 'm', 'Y'] }"
 :validate="'legalAge|date_format:dd/MM/yyyy'"
 :val="this.user.birthday"
/>

我的 VvFormMaskInput

<template>
  <div class="field-container">
    <label v-if="type != 'hidden'" :for="id" class="form-label">{{ $t(`forms.${label}`) }} {{ showAsterisk }}</label>

    <div class="row">
      <input
        v-cypress="testId"
        :type="type"
        :disabled="disabled"
        :id="id"
        class="form-input"
        v-validate="validate !== '' ? validate : false"
        :value="val"
        :ref="id"
        :name="id"
        @input="$emit('input', $event.target.value)"
        v-cleave="cleave"
        :placeholder="placeholder"
        mode="lazy"
      />

      <div class="valid-field">
        <img v-if="isValid" src="@/assets/input-valid-check-mark.png" />
      </div>
    </div>
    <!-- Helper -->
    <span v-if="this.label == 'birthday'" class="form-error birthday">{{ $t(`forms.helps.${label}`) }}</span>
    <!-- Error messages -->
    <span class="form-error">{{ errors.first(id) }}</span>
  </div>
</template>

<script>

export default {
  name: 'VvFormMaskInput',
  computed: {
    showAsterisk() {
      if ((this.validate && this.validate.indexOf('required') !== -1) || this.label == 'birthday') {
        return '*'
      }

      return ''
    }
  },
  data: () => ({
    isValid: false
  }),
  props: {
    id: {
      type: String
    },
    label: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    val: {
      type: String,
      default: ''
    },
    validate: {
      type: String,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    },
    testId: {
      type: String,
      default: null
    },
    cleave: {
      type: Object,
      default: null
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  inject: ['$validator'],
  watch: {
    value: async function(val) {
      if (this.validate === '') {
        this.isValid = val !== ''
      } else {
        this.isValid = (await this.$validator.verify(val, this.validate)).valid
      }
    }
  }
}
</script>

我的 VeeValidate 的 legalAge 自定义规则

import parse from 'date-fns/parse'
import format from 'date-fns/format'
import subYears from 'date-fns/subYears'

/**
 * Rule for legal age > 18 years old
 * @argument {value} Date
 */ 
export const legalAge = (value) => {
  let d1 = new Date(parse(value, 'dd/MM/yyyy', new Date()))
  let d2 = new Date(parse(format(subYears(new Date(), 18), 'dd/MM/yyyy'), 'dd/MM/yyyy', new Date()))
  return d1 <= d2
};

当我加载我的表单并且没有以前的生日时，我已经用占位符“JJ/MM/YYYY”输入了我的输入。我可以输入格式为“dd/MM/yyyy”的有效日期并验证我的表格。当它是法定年龄（18 岁以上）的日期或否时，它也会显示我。

当我加载相同的表单，但我已经设置了生日时，我的输入将其作为默认值接收，所以没关系，但我无法更改此输入值...

如果您曾经使用 VeeValidate 和 CleaveJS 进行此类输入，我很想听听您是否遇到过相同类型的问题。

谢谢您的帮助 ！

4

0 回答 0