VeeValidate สำหรับการตรวจสอบตามสคีมา
useForm(), useField(), สคีมา yup ข้อความข้อผิดพลาด และการจัดการการตรวจสอบแบบไม่พร้อมกัน
VeeValidate สำหรับการตรวจสอบตามสคีมา เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
ขยายระบบด้วย VeeValidate
เมื่อ form มีขนาดใหญ่ขึ้น การตรวจสอบที่เขียนเองจะกลายเป็นงานน่าเบื่อ VeeValidate เป็นไลบรารียอดนิยมของวิวที่จัดการสถานะ form ตรวจสอบตาม schema และเปิดเผยข้อผิดพลาด ทั้งหมดนี้ทำงานแบบรีแอกทีฟ
การตรวจสอบตาม Schema
แทนที่จะเขียนการตรวจสอบด้วยตนเอง คุณสามารถอธิบายกฎแบบประกาศไว้ใน schema การใช้ VeeValidate ร่วมกับ ยัป ช่วยให้คุณสร้าง schema ได้อย่างต่อเนื่องและอ่านง่าย
<script setup>
import * as yup from 'yup'
const schema = yup.object({
name: yup.string().required(),
email: yup.string().email().required()
})
</script>ตั้งค่า Form ด้วย useForm
useForm เริ่มต้นสถานะระดับ form และการตรวจสอบความถูกต้อง ส่ง schema ของคุณเป็น validationSchema แล้วระบบจะเชื่อมทุกอย่างเข้าด้วยกัน
<script setup>
import { useForm } from 'vee-validate'
const { handleSubmit, errors } = useForm({
validationSchema: schema
})
</script>เชื่อมช่องข้อมูลด้วย useField
useField ลงทะเบียนช่องป้อนข้อมูลหนึ่งช่องด้วยชื่อของช่อง โดยคืนค่า value, errorMessage และตัวจัดการ handleBlur ของช่องนั้น
<script setup>
import { useField } from 'vee-validate'
const { value: name, errorMessage, handleBlur } = useField('name')
</script>ผูกช่องข้อมูลในเทมเพลต
ผูก value ที่คืนค่ามาด้วย v-model และเชื่อม @blur เข้ากับ handleBlur เพื่อให้ตรวจสอบเมื่อออกจากช่อง
<template>
<input v-model="name" @blur="handleBlur" />
<span>{{ errorMessage }}</span>
</template>แสดงข้อความข้อผิดพลาด
แต่ละช่องข้อมูลจะแสดง errorMessage ของตนเอง ซึ่งเป็นสตริงแบบรีแอกทีฟ โดยจะว่างเปล่าเมื่อถูกต้อง และจะมีข้อความจาก schema เมื่อไม่ถูกต้อง
<template>
<input v-model="name" @blur="handleBlur" />
<span v-if="errorMessage" class="error">{{ errorMessage }}</span>
</template>การจัดการการส่ง
handleSubmit ห่อหุ้มฟังก์ชันส่งของคุณ โดยจะตรวจสอบความถูกต้องก่อน และเรียกใช้ฟังก์ชันเรียกกลับพร้อมค่าต่าง ๆ ก็ต่อเมื่อ form ทั้งหมดถูกต้อง
<script setup>
const onSubmit = handleSubmit((values) => {
console.log('valid form', values)
})
</script>
<template>
<form @submit="onSubmit">...</form>
</template>ข้อผิดพลาดระดับ Form
ออบเจ็กต์ errors จาก useForm จะแมปชื่อช่องข้อมูลกับข้อความปัจจุบันของช่องนั้น เหมาะสำหรับใช้สร้างสรุปหรือส่วนติดต่อผู้ใช้แบบมีเงื่อนไข
<script setup>
const { errors } = useForm({ validationSchema: schema })
// errors.name, errors.email
</script>เหตุผลที่ควรใช้ไลบรารี
- schema แบบประกาศเข้ามาแทนที่การตรวจสอบด้วยตนเองที่ซ้ำซาก
- มีจังหวะการตรวจสอบเมื่อออกจากช่อง เมื่อเปลี่ยนค่า และเมื่อส่งมาให้ในตัว
- มี
errorMessageระดับช่องข้อมูลและerrorsระดับ form - สร้างกฎแบบอะซิงก์และกฎข้ามช่องข้อมูลผ่านยัปได้ง่าย
คอมโพเนนต์กับ API แบบประกอบ
VeeValidate ยังมีคอมโพเนนต์ <Form> และ <Field> สำหรับรูปแบบที่เริ่มจากเทมเพลต ฟังก์ชันการประกอบ useForm และ useField ทำงานเข้ากับ <script setup> ได้ดีกว่าและให้การควบคุมมากขึ้น
แบบทำเองกับแบบใช้ Schema
การตรวจสอบด้วยตนเองช่วยสอนกลไกพื้นฐานและเหมาะกับ form ขนาดเล็ก การตรวจสอบตาม schema ด้วย VeeValidate และยัปสามารถรองรับ form ขนาดใหญ่และซับซ้อนได้ด้วยโค้ดที่น้อยลงมากและมีข้อผิดพลาดน้อยกว่า
ตรวจสอบอย่างรวดเร็ว
ทดสอบความรู้เกี่ยวกับ VeeValidate ของคุณ
สรุปทบทวน
การตรวจสอบตาม schema ด้วย VeeValidate:
- อธิบายกฎใน schema ของ
yupที่ส่งเป็นvalidationSchema useFormจัดการสถานะ form,errorsและhandleSubmituseFieldคืนค่าvalue,errorMessageและhandleBlurสำหรับแต่ละช่องป้อนข้อมูล- รองรับ form ขนาดใหญ่ได้ดีกว่าการตรวจสอบด้วยตนเองอย่างมาก
คำถามที่พบบ่อย
บทเรียน “VeeValidate สำหรับการตรวจสอบตามสคีมา” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “VeeValidate สำหรับการตรวจสอบตามสคีมา” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “VeeValidate สำหรับการตรวจสอบตามสคีมา”
useForm(), useField(), สคีมา yup ข้อความข้อผิดพลาด และการจัดการการตรวจสอบแบบไม่พร้อมกัน คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “VeeValidate สำหรับการตรวจสอบตามสคีมา” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- v-model บนองค์ประกอบฟอร์มทั้งหมด
- การส่งและรีเซ็ตฟอร์ม
- รูปแบบการตรวจสอบด้วยตนเอง
- VeeValidate สำหรับการตรวจสอบตามสคีมา