Vue.jsでのフォーム管理術：Vuelidateを活用する

npm install @vuelidate/core @vuelidate/validators

import useVuelidate from '@vuelidate/core';
import { required, minLength } from '@vuelidate/validators';

export default {
  setup() {
    const state = reactive({
      username: '',
    });

    const rules = {
      username: { required, minLength: minLength(3) },
    };

    const v$ = useVuelidate(rules, state);
    return { state, v$ };
  },
};

<div>
  <input v-model="state.username" />
  <span v-if="v$.username.$error">ユーザー名は必須で、3文字以上である必要があります。</span>
</div>

const state = reactive({ username: '', email: '' });
const rules = {
  username: { required },
  email: { required, email },
};

const isValidUsername = (value) => /^[a-zA-Z0-9]+$/.test(value);

if (state.condition) {
  rules.username.required = false;
}

const submitForm = () => {
  v$.$validate();
  if (!v$.$error) {
    console.log('フォームが送信されました');
  }
};

const resetForm = () => {
  state.username = '';
  v$.$reset();
};

import { required, maxLength } from '@vuelidate/validators';

if (state.isActive) {
  rules.email.required = true;
}

<input v-model="state.username" :class="{'error': v$.username.$error}" />

app.config.performance = true;