如何解决出现错误时如何突出显示 vee-validate 表单向导的输入字段?
我正在使用 Vue3 并尝试验证我的输入并在使用 vee-validate
包验证字段期间突出显示输入字段。
<template>
<div>
<h1>Multi-step Form Wizard</h1>
<p>
This example uses a the composition API to create a multi-step form with
next/prevIoUs controls and validation before moving to the next step.
There are infinite ways you Could implement this,this is just one of
them. You Could throw in a form generator to make this even easier.
</p>
<FormWizard :validation-schema="validationSchema" @submit="onSubmit">
<FormStep>
<Field name="fullName" type="text" placeholder="Type your Full name" />
<ErrorMessage name="fullName" />
<Field name="email" type="email" placeholder="Type your email" />
<ErrorMessage name="email" />
</FormStep>
<FormStep>
<Field
name="password"
type="password"
placeholder="Type a strong one"
/>
<ErrorMessage name="password" />
<Field
name="confirmPass"
type="password"
placeholder="Confirm your password"
/>
<ErrorMessage name="confirmPass" />
</FormStep>
<FormStep>
<Field name="favoriteDrink" as="select">
<option>Select a drink</option>
<option value="coffee">Coffee</option>
<option value="tea">Tea</option>
<option value="soda">Soda</option>
</Field>
<ErrorMessage name="favoriteDrink" />
</FormStep>
</FormWizard>
</div>
</template>
<script>
import { Field,ErrorMessage } from "vee-validate";
import * as yup from "yup";
import FormWizard from "@/components/FormWizard.vue";
import FormStep from "@/components/FormStep.vue";
export default {
name: "App",components: {
FormWizard,FormStep,Field,ErrorMessage,},setup() {
// break down the validation steps into multiple schemas
const validationSchema = [
yup.object({
fullName: yup.string().required().label("Full Name"),email: yup.string().required().email().label("Email Address"),}),yup.object({
password: yup.string().min(8).required(),confirmPass: yup
.string()
.required()
.oneOf([yup.ref("password")],"Passwords must match"),yup.object({
favoriteDrink: yup
.string()
.required()
.oneOf(["coffee","tea","soda"],"Choose a drink"),];
/**
* Only Called when the last step is submitted
*/
function onSubmit(formData) {
console.log(JSON.stringify(formData,null,2));
}
return {
validationSchema,onSubmit,};
},};
</script>
<style>
input,select {
margin: 10px 0;
display: block;
}
</style>
我一直在这里按照示例进行操作 https://codesandbox.io/s/multi-step-formwizard-with-vee-validate-184bd?from-embed=&file=/src/App.vue:0-2720,我可以显示错误消息,但不会突出显示错误字段。
我可以知道如何实现这一目标吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。