0

Делаю форму регистрации. Для валидации использую библиотеку vee-validate для vue3 (Документация)

Я не понимаю как мне настроить минимальное количество символов на пароле. Вот моя форма:

<template>
  <div class="container mt-4">
    <div class="row">
      <div class="col-sm-4 mx-auto">

        <Form @submit="onSubmit">
          <div class="mb-3">
            <label for="name" class="form-label">Username</label>
            <Field
              name="username"
              type="user"
              class="form-control"
              id="name"
              :rules="validateUsername"
            />
            <ErrorMessage name="username" />
          </div>

          <div class="d-flex flex-column bd-highlight mb-3">
            <label for="email" class="form-label">Email address</label>
            <Field 
            name="email"
            type="email" 
            :rules="validateEmail"
            id="email"
             />
            <ErrorMessage name="email" />
          </div>

          <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <Field
            name="password"
            type="password" 
            class="form-control" 
            id="password" 
            />
            <ErrorMessage name="password" />
          </div>

          <div class="mb-3">
            <label for="passwordConfirm" class="form-label">Password confirm</label>
            <Field 
            name="confirmation"
            type="password" 
            class="form-control" 
            id="passwordConfirm" 
            rules="confirmed:@password"
            />
            <ErrorMessage name="confirmation" />
          </div>

          <button type="submit" class="btn btn-primary">Registration</button>
          <hr />
          <p class="center">
            Do you have an account?
            <router-link to="/login">Login</router-link>
          </p>
        </Form>
      </div>
    </div>
  </div>
</template>

<script>
import { Field, Form, ErrorMessage, defineRule  } from "vee-validate";
import * as yup from 'yup';



defineRule('confirmed', (value, [target]) => {
  if (value === target) {
    return true;
  }

  return 'Passwords must match';
});

export default {
  components: {
    Form,
    Field,
    ErrorMessage,
  },
  data() {
    return{
      validateUsername: yup.string().required(),
      validatePassword: yup.string().required().min(8),

    }
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(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
      if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
        return "This field must be a valid email";
      }

      // All is good
      return true;
    },

    

  },
};
</script>

<style lang="scss" scoped></style>

1 ответ 1

0

А из той же документации https://vee-validate.logaretm.com/v4/v4/guide/global-validators#min не подходит правило min? То есть получаем:

<Field
   name="password"
   type="password" 
   class="form-control" 
   id="password" 
   rules="min:3"
/>
1
  • Не то, просто оказывается нужно было совместить библиотеки валидации. Все заработало после определения поля вот так :rules="validatePassword"
    – yOz
    21 июн 2021 в 8:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.