Veevalidate 4场验证状态

发布于 2025-02-04 13:30:25 字数 2176 浏览 4 评论 0原文

我正在尝试模仿 bootstrap表单验证样式 vue and vee---证实。

为了获得该Boostrap验证错误消息，当存在验证错误时，输入本身必须具有IS INVALID类别。此外，当然，错误消息元素必须具有类无效。

当存在验证错误时，我正在努力将IS INVALID类添加到输入中。

在Vee-validate 3中，我能够使用本指南。但这似乎是弃用的。

<template>
  <div id="app">
    <Form @submit="onSubmit">
      <Field name="email" type="email" :rules="validateEmail" class="form-control"/>
      <ErrorMessage class="invalid-feedback" name="email" />
      <button class="btn btn-primary">Sign up</button>
    </Form>
  </div>
</template>

<script>
  import {
    Form,
    Field,
    ErrorMessage
  } from "vee-validate";

  export default {
    components: {
      Form,
      Field,
      ErrorMessage,
    },
    methods: {
      onSubmit(values) {
        console.log(values, null, 2);
      },
      validateEmail(value) {
        // if the field is empty
        if (!value) {
          return "This field is required";
        }

        // if the field is not a valid email
        const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
        if (!regex.test(value)) {
          return "This field must be a valid email";
        }

        // All is good
        return true;
      },
    },
  };
</script>

<style>
  span {
    display: block;
    margin: 10px 0;
  }
</style>

版本

“ vee-validate”：“^4.5.11”，
“ vue”：“^3.2.33”，

原文

I'm trying to imitate Bootstrap form validation styling with Vue and Vee-validate.

In order to have that Boostrap validation error message, when there's a validation error, the input itself must have is-invalid class presents. And in addition, the error message element must have invalid-feedback class, of course.

I'm struggling to add is-invalid class to the input when there's a validation error.

In Vee-validate 3, I was able to control the input element's classes with this guide. But it seems to be deprecated.

This is a code sandbox that you can play with. Nothing extra-ordinary, just straight out of Veevalidate example.

<template>
  <div id="app">
    <Form @submit="onSubmit">
      <Field name="email" type="email" :rules="validateEmail" class="form-control"/>
      <ErrorMessage class="invalid-feedback" name="email" />
      <button class="btn btn-primary">Sign up</button>
    </Form>
  </div>
</template>

<script>
  import {
    Form,
    Field,
    ErrorMessage
  } from "vee-validate";

  export default {
    components: {
      Form,
      Field,
      ErrorMessage,
    },
    methods: {
      onSubmit(values) {
        console.log(values, null, 2);
      },
      validateEmail(value) {
        // if the field is empty
        if (!value) {
          return "This field is required";
        }

        // if the field is not a valid email
        const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
        if (!regex.test(value)) {
          return "This field must be a valid email";
        }

        // All is good
        return true;
      },
    },
  };
</script>

<style>
  span {
    display: block;
    margin: 10px 0;
  }
</style>

Versions

"vee-validate": "^4.5.11",
"vue": "^3.2.33",

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

思慕 2025-02-11 13:30:25

您可以通过利用＆lt; field /＆gt; < /code> -component的范围来渲染更复杂的字段。

如果您用以下替换现场组件，则应按预期工作：

<Field name="email" :rules="validateEmail" v-slot="{ field, errors }">
  <input v-bind="field" type="email" :class="{'is-invalid': !!errors.length }" />
</Field>

You can render more complex fields, by utilizing the scoped slots of the <Field />-component.

If you replace your Field-component with the following, it should work as expected:

<Field name="email" :rules="validateEmail" v-slot="{ field, errors }">
  <input v-bind="field" type="email" :class="{'is-invalid': !!errors.length }" />
</Field>

回复收藏 0 原文

~没有更多了~