结合 veevalidate 和 cleavejs 时更新 vue 输入默认值

编程问答 2022-05-18

问题描述

各位开发者好。

我正在 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,validate: {
      type: String,default: null
    },disabled: {
      type: Boolean,default: false
    },testId: {
      type: String,cleave: {
      type: Object,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'),new Date()))
  return d1 <= d2
};

当我加载表单时，没有上一个生日，我输入了一个占位符“JJ/MM/YYYY”。我可以以“dd/MM/yyyy”格式输入有效日期并使我的表格生效。 它还会显示我是否符合法定年龄（18 岁以上）的日期。

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

如果您曾经将 veevalidate 和 CleaveJS 用于此类输入，我很想知道您是否遇到了相同类型的问题。

感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

cleavemaskingvee-validatevue.js