标签: vuelidate

如何在父组件中验证嵌套组件Vuelidate？我想更改parentForm.$invalid子组件中的输入是否有效。

家长：

<parent-component>
  </child-component-1>
  </child-component-2>
</parent-component>

validations: {
  parent: WHAT HERE?
}

Child-1

<child-component-1>
  </some-input>
</child-component-1>

data() {
  return {
    someInput: ""
  };
},

validations: {
  someInput: required
}

孩子-2

<child-component-2>
  </some-input>
</child-component-2>

data() {
  return {
    someInput: ""
  };
},

validations: {
  someInput: required
}

未找到可验证 SameAs 方法的 fieldName。

与(blabla)相同

blabla = \'internalFormData.password\', \'internalFormData.password.value\', \'this.internalFormData.password\', \'this.internalFormData.password.value\', \'password\', \' this.password\', \'密码.value\'

-----------script----------\ndata () {\n  return {\n     internalFormData: {\n        password: \'\',\n        repassword: \'\'\n      }\n   }\n},\n\n\nvalidations: {\n      password: {\n        value: {\n          required,\n          minLength: minLength(8)\n        }\n      },\n      repassword: {\n        value: {\n          required,\n          minLength: minLength(8),\n          sameAs: sameAs(\'internalFormData.password\')\n        }\n      }\n    }\n  },\n\n\n\n---------------template--------------\n<error\n   v-if="!$v.internalFormData.repassword.value.sameAs"\n>\n  \xeb\xb9\x84\xeb\xb0\x80\xeb\xb2\x88\xed\x98\xb8\xea\xb0\x80 \xec\x9d\xbc\xec\xb9\x98\xed\x95\x98\xec\xa7\x80 \xec\x95\x8a\xec\x8a\xb5\xeb\x8b\x88\xeb\x8b\xa4.\n<error>\n

错误不会消失。

在我的 Vue 2.7.14 应用程序中，我使用的是 Vuelidate 2.0.0。我正在尝试将测试从 Jest 迁移到 Vitest，但v$在后一种情况下该对象未正确初始化。该组件有一个绑定到的复选框formData.accepted

  validations () {
    return {
      formData: {
        accepted: {
          required,
          sameAs: sameAs(true)
        }
      }
    }
  }

Vuelidate 根据文档在组件内初始化

  setup () {
    return {
      v$: useVuelidate({ $autoDirty: true })
    }
  },

当我在 Jest 下运行以下测试时，它通过了

  it('click save button', async () => {
    const wrapper = mount(MyComponent)

    expect(wrapper.vm.v$.formData.accepted.$invalid).toBeTruthy()
    await wrapper.find('[data-cy="accept-checkbox"]').trigger('click')
    expect(wrapper.vm.v$.formData.accepted.$invalid).toBeFalsy()
  })

但是，如果我使用 Vitest 运行相同的测试，它会失败，因为wrapper.vm.v$.formDataisundefined因为v$被初始化为：

v$ {
  "$dirty": false,
  "$path": "__root",
  "$model": null,
  "$error": …

我正在为vuelidate我的组件中的验证编写单元测试.我发现该$touch()方法是异步调用的,所以我需要使用$nextTick()它expect().当我需要两个nextTick()s两个时出现问题expect()s.

describe('Validations', () => {
    let data
    let myComponent
    beforeEach(() => {
        data = () => {
            propertyABC = 'not allowed value'
        }
        myComponent = localVue.component('dummy', {template: '<div></div>', validations, data})

    it('Properly validates propertyABC', (done) => {
        Vue.config.errorHandler = done
        let wrapper = mount(myComponent, {localVue})
        wrapper.vm.$v.$touch()

        wrapper.vm.$nextTick(() => {
            expect(wrapper.vm.$v.propertyABC.$error).to.be.true
            # fails, because propertyABC === 'allowed value', adn thus $error is false
            done()
        }

        wrapper.vm.propertyABC = 'allowed value'
        wrapper.vm.$v.propertyABC.$touch() …

我希望有人可以向我澄清在验证Date对象时如何正确使用Vuelidate。我想使用当前日期作为最小日期，因此，如果用户稍后输入日期，将显示错误。

我有一个例子：https : //jsfiddle.net/cheslavcc/fns8eh0f/1/

Vue.use(window.vuelidate.default)
const { required, minValue } = window.validators

new Vue({
  el: "#app",
  data: {
    text: ''
  },
  validations: {
    text: {
        minValue: minValue(moment(new Date(), 'DD.MM.YYYY').format('DD.MM.YYYY')),
    }
  }
})

我正在使用Moment.js作为日期格式化程序，并使用来自官方Vuelidate文档的minValue：https ://monterail.github.io/vuelidate/#sub-builtin-validators

任何帮助表示赞赏，非常感谢！

您好，我需要验证密码表单 除了必填字段 必须至少有一个大写字母，至少有一个小写字母，数字至少有一个和至少一个以下字符“#?!@$% ^ & * -" 我正在使用这个包https://vuelidate.js.org/

编辑

或为此使用正则表达式

你们如何在Vuetify中进行验证？我无法绕过非常冗长的验证语法。

根据Vuetify的文档，我正在使用Vuelidate，这是我必须实现一个简单的必填字段的方法：

脚本：

import { required } from 'vuelidate/lib/validators';

computed: {
    userNameErrors() {
      const errors = []
      if (!this.$v.loginForm.userName.$dirty) {
        return errors
      }
      !this.$v.loginForm.userName.required && errors.push('This field is required')
      return errors
    }
},
validations: {
    loginForm: {
      userName: {
        required
      }
    }
  }

模板：

 <v-text-field :label="Username"
                    prepend-icon="account_circle"
                    v-model="loginForm.userName"
                    :error-messages="userNameErrors"
                    @input="$v.loginForm.userName.$touch()"
                    @blur="$v.loginForm.userName.$touch()"
                    :required="true"></v-text-field>

我觉得很冗长。我做事的方式可能是错误的，有人可以告诉您您是如何做到这种极简主义或简朴的吗？

PS我来自Angular1背景，并且ng消息非常酷而且简单！

所以我的电子邮件/用户表单元素上的异步验证器有问题。每次输入字母时，它都会检查验证。如果电子邮件是 30 个字符，那就是超过 30 个电话！任何人都知道去抖动 vuelidate 自定义验证器的最佳方法吗？当我尝试使用 debounce 时，我从 vuelidate 收到各种错误，因为它正在等待响应。

<div class="form-group">
        <label for="emailAddress">Email address</label>
        <input type="email" class="form-control col-md-6 col-sm-12" v-bind:class="{ 'is-invalid': $v.user.email.$error }" id="emailAddress" v-model.trim="$v.user.email.$model" @change="delayTouch($v.user.email)" aria-describedby="emailHelp" placeholder="email@example.com">
        <small v-if="!$v.user.email.$error" id="emailHelp" class="form-text text-muted">We'll never share your email with anyone.</small>
        <div class="error invalid-feedback" v-if="!$v.user.email.required">Email address is required.</div>
        <div class="error invalid-feedback" v-if="!$v.user.email.email">This is not a valid email address.</div>
        <div class="error invalid-feedback" v-if="!$v.user.email.uniqueEmail">This email already has an account.</div>
    </div>

    <script>
        import { required, sameAs, minLength, maxLength, email } from 'vuelidate/lib/validators'
        import …

我是 Vue Js 和 Vuelidate 的新手。只是尝试验证来自父组件的表单输入字段，如下所示： https: //github.com/monterail/vuelidate/issues/333

父组件中的子组件：

<contact-list ref="contactList" :contacts="contacts" @primaryChanged="setPrimary" @remove="removeContact" @ready="isReady => readyToSubmit = isReady"/>

孩子身上的方法：

computed: {
    ready() {
        return !this.$v.email.$invalid;
    }
},
watch: {
    ready(val) {
        this.$emit('ready', val);
    }
},

methods: {
    touch() {
        this.$v.email.$touch();
    }
}

我从父级调用 touch() 方法，如下所示：

submit() {
            this.$refs.contactList.touch();
        },

但我收到这个错误：

Error in event handler for "click": "TypeError: this.$refs.contactList.touch is not a function".

有任何想法吗？谢谢。

Vuelidate 是否支持 VueJs 中的打字稿？如果是，如何使用？

我可以在 JavaScript 中使用它。