npm i vee-validate@next --save
npm i yup
<script lang="ts" setup>
import { Form, Field, ErrorMessage } from "vee-validate";
import * as yup from "yup";
const schema = yup.object({
password: yup.string().required().min(4),
sortNo: yup.number(),
});
function getSubmitFn<Schema extends yup.ObjectSchema<Record<string, any>>>(
_: Schema,
callback: (values: yup.InferType<Schema>) => void
) {
return (values: Record<string, any>) => {
return callback(values);
};
}
const handleSubmit = getSubmitFn(schema, (value) => {
console.log("● value");
console.log(value);
});
</script>
<template>
<h1>Samplepageelement</h1>
<Form @submit="handleSubmit" v-slot="{ values }" :validation-schema="schema">
<!-- <Form @submit="handleSubmit"> -->
<div>
<Field name="password" type="password" />
<ErrorMessage name="password" style="color: #c45656" />
</div>
<div>
<Field
name="sortNo"
type="number"
@update:modelValue="values.sortNo = Number(values.sortNo)"
/>
<ErrorMessage name="sortNo" style="color: #c45656" />
</div>
<button>送信</button>
</Form>
</template>
結果
● value
{password: 'asdfasdfads', sortNo: 1234}
number型を期待しているsortNoがそのままだとstringで返ってきてしまうので、@update:modelValue で変換しています。
https://bit.ly/3uRxmpM. https://vee-validate.logaretm.com/v4/guide/components/validation.
const handleSubmit = (values:any) => {
console.log( '● value' );
console.log( value );
};
↓ 以下のように書き換えます
function getSubmitFn<Schema extends yup.ObjectSchema<Record<string, any>>>(
_: Schema,
callback: (values: yup.InferType<Schema>) => void
) {
return (values: Record<string, any>) => {
return callback(values);
};
}
const handleSubmit = getSubmitFn(schema, (value) => {
console.log("● value");
console.log(value);
});
引用 : https://github.com/logaretm/vee-validate/issues/3521
<template>
<div>
<div>
<Field name="age" as="input" type="number" />
<div>{{ errors.age }}</div>
</div>
<div>
<Field name="name" as="input" />
<div>{{ errors.name }}</div>
</div>
<div>
<Field name="password" as="input" type="password" />
<div>{{ errors.password }}</div>
</div>
<pre>Is form dirty: {{ isDirty }}</pre>
<!-- print form values -->
<pre>{{ values }}</pre>
</div>
</template>
<script lang="ts" setup>
import { defineComponent, computed } from 'vue'
import { Field, useForm } from 'vee-validate'
import * as yup from 'yup'
interface UserFormValues {
age: number
name: string
password: string
}
const schema = yup.object().shape({
age: yup.number().required(),
name: yup.string().required(),
password: yup.string().required().min(8)
})
const { meta, values, errors } = useForm<UserFormValues>({
validationSchema: schema
})
const isDirty = computed(() => meta.value.dirty)
</script>
// インポートした「configure」を使用してトリガするイベントを変更
configure({
validateOnBlur: true, // blurイベントで検証をトリガーする必要がある場合、デフォルトはtrue
validateOnChange: true, // changeイベントで検証をトリガーする必要がある場合、デフォルトはtrue
validateOnInput: true, // inputイベントで検証をトリガーする必要がある場合、デフォルトはfalse
validateOnModelUpdate: true, // update:modelValue(v-model)イベントで検証をトリガーする必要がある場合、デフォルトはtrue
});
https://vee-validate.logaretm.com/v4/guide/composition-api/handling-forms#initial-errors
<Field name="password" type="text" />
<ErrorMessage name="password" />
↓
<Field name="password" v-slot="{ value, field, errorMessage }">
<el-form-item :error="errorMessage">
<el-input
v-bind="field"
:validate-event="false"
:model-value="value"
type="password"
show-password
/>
</el-form-item>
</Field>