รูปแบบการตรวจสอบด้วยตนเอง
ออบเจ็กต์ข้อผิดพลาดแบบรีแอกทีฟ การตรวจสอบเมื่อสูญเสียโฟกัสเทียบกับเมื่อส่งฟอร์ม และการจับคู่รหัสผ่านยืนยัน
รูปแบบการตรวจสอบด้วยตนเอง เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
การตรวจสอบความถูกต้องโดยไม่ใช้ไลบรารี
สำหรับ form อย่างง่าย คุณสามารถตรวจสอบความถูกต้องด้วยตนเองโดยใช้สถานะแบบรีแอกทีฟ คุณจะติดตามข้อผิดพลาด เรียกใช้การตรวจสอบเมื่อส่งหรือเมื่อออกจากช่อง และแสดงข้อความด้วยคำสั่งกำกับ วิธีนี้สอนพื้นฐานที่ไลบรารีทุกตัวนำไปต่อยอด
ออบเจ็กต์ข้อผิดพลาด
เก็บออบเจ็กต์แบบรีแอกทีฟ errors โดยใช้ชื่อช่องข้อมูลเป็นคีย์ สตริงว่างหรือคีย์ที่ไม่มีอยู่หมายความว่าไม่มีข้อผิดพลาด
<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
const errors = reactive({ name: '', email: '' })
</script>ฟังก์ชัน validate
เขียนฟังก์ชัน validate ที่ตรวจสอบแต่ละช่องข้อมูลและกำหนดข้อความลงในออบเจ็กต์ข้อผิดพลาด จากนั้นคืนค่าว่า form ถูกต้องหรือไม่
<script setup>
function validate() {
errors.name = form.name ? '' : 'Name is required'
errors.email = form.email.includes('@') ? '' : 'Invalid email'
return !errors.name && !errors.email
}
</script>ตรวจสอบเมื่อส่ง
เรียก validate ที่จุดเริ่มต้นของตัวจัดการส่ง และหยุดการทำงานหากการตรวจสอบไม่ผ่าน วิธีนี้รับประกันว่าจะไม่มีการส่งข้อมูลที่ไม่ถูกต้อง
<script setup>
function onSubmit() {
if (!validate()) return
// proceed to send
}
</script>ตรวจสอบแต่ละช่องเมื่อออกจากช่อง
การตรวจสอบเฉพาะเมื่อส่งอาจให้ความรู้สึกว่าล่าช้า ให้ตรวจสอบช่องข้อมูลทีละช่องเมื่อผู้ใช้ออกจากช่องนั้นโดยใช้ @blur เพื่อรับข้อมูลตอบกลับทันที
<script setup>
function validateName() {
errors.name = form.name ? '' : 'Name is required'
}
</script>
<template>
<input v-model="form.name" @blur="validateName" />
</template>การแสดงข้อความข้อผิดพลาด
ใช้ v-if เพื่อแสดงข้อความเฉพาะเมื่อช่องข้อมูลนั้นมีข้อผิดพลาด วางข้อความไว้ใกล้กับช่องป้อนข้อมูล
<template>
<input v-model="form.name" @blur="validateName" />
<span v-if="errors.name" class="msg">{{ errors.name }}</span>
</template>การกำหนดรูปแบบให้ช่องข้อมูลที่ไม่ถูกต้อง
ผูกคลาสด้วยไวยากรณ์แบบออบเจ็กต์เพื่อเพิ่มเส้นขอบสีแดงเมื่อมีข้อผิดพลาด คลาสนี้จะมีผลเฉพาะขณะที่ errors.name มีค่าเป็นจริงเท่านั้น
<input
v-model="form.name"
:class="{ error: errors.name }"
@blur="validateName"
/>สไตล์ error
กฎ CSS ขนาดเล็กช่วยให้รูปลักษณ์สมบูรณ์ขึ้น — เส้นขอบสีแดงส่งสัญญาณว่าช่องข้อมูลต้องได้รับการแก้ไข
<style>
.error { border: 1px solid red; }
.msg { color: red; font-size: 12px; }
</style>ความถูกต้องที่คำนวณได้
คำนวณค่าสถานะความถูกต้องโดยรวมด้วย computed เพื่อเปิดหรือปิดปุ่มส่งแบบรีแอกทีฟ
<script setup>
import { computed } from 'vue'
const isValid = computed(() => !errors.name && !errors.email)
</script>
<template>
<button :disabled="!isValid">Submit</button>
</template>จุดเด่นและข้อจำกัด
การตรวจสอบด้วยตนเองมีความโปร่งใสและไม่ต้องพึ่งพาสิ่งเพิ่มเติม เหมาะสำหรับ form ขนาดเล็ก แต่เมื่อกฎมีจำนวนมากขึ้น เช่น การตรวจสอบข้ามช่องข้อมูล การตรวจสอบแบบอะซิงก์ และช่องข้อมูลจำนวนมาก โค้ดประกอบที่ต้องเขียนซ้ำจะเพิ่มขึ้นเรื่อย ๆ จึงเป็นเหตุผลที่มีไลบรารีเหล่านี้
สรุปลำดับการตรวจสอบ
รูปแบบคือ: ข้อผิดพลาดแบบรีแอกทีฟ ฟังก์ชัน validate เรียกใช้เมื่อส่ง และอาจเรียกเมื่อออกจากช่องด้วย แสดงข้อความด้วย v-if และกำหนดรูปแบบด้วยคลาสแบบมีเงื่อนไข
ตรวจสอบอย่างรวดเร็ว
ทดสอบความรู้เกี่ยวกับการตรวจสอบด้วยตนเองของคุณ
สรุปทบทวน
รูปแบบการตรวจสอบด้วยตนเอง:
- เก็บออบเจ็กต์แบบรีแอกทีฟ
errorsโดยใช้ช่องข้อมูลเป็นคีย์ - ฟังก์ชัน
validateกำหนดข้อความและคืนค่าความถูกต้อง - ตรวจสอบเมื่อส่ง และตรวจสอบแต่ละช่องเมื่อใช้
@blurเพื่อรับข้อมูลตอบกลับอย่างรวดเร็ว - แสดงข้อความด้วย
v-if="errors.x"และกำหนดรูปแบบด้วย:class="{ error: errors.x }"
คำถามที่พบบ่อย
บทเรียน “รูปแบบการตรวจสอบด้วยตนเอง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “รูปแบบการตรวจสอบด้วยตนเอง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “รูปแบบการตรวจสอบด้วยตนเอง”
ออบเจ็กต์ข้อผิดพลาดแบบรีแอกทีฟ การตรวจสอบเมื่อสูญเสียโฟกัสเทียบกับเมื่อส่งฟอร์ม และการจับคู่รหัสผ่านยืนยัน คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “รูปแบบการตรวจสอบด้วยตนเอง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- v-model บนองค์ประกอบฟอร์มทั้งหมด
- การส่งและรีเซ็ตฟอร์ม
- รูปแบบการตรวจสอบด้วยตนเอง
- VeeValidate สำหรับการตรวจสอบตามสคีมา