Dev to webs {Coding…}

เรียนรู้การพัฒนาซอฟเวอร์ เพื่อความรู้ที่ยั่งยืน

บทที่ 16: การจัดการฟอร์มและการตรวจสอบข้อมูลใน Vue.js

1. การจัดการฟอร์มใน Vue.js

การจัดการฟอร์มใน Vue.js ทำได้ง่ายด้วยการใช้ v-model ซึ่งเป็น Directive สำหรับการ Binding ข้อมูลแบบสองทาง (Two-Way Binding) ช่วยให้ฟอร์มสามารถรับและแสดงข้อมูลใน data ได้แบบอัตโนมัติ

ตัวอย่างการใช้งานฟอร์มพื้นฐาน

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<template>
  <div>
    <h1>Form Example</h1>
    <form @submit.prevent="handleSubmit">
      <label for="name">Name:</label>
      <input id="name" v-model="formData.name" type="text" placeholder="Enter your name" />
 
      <label for="email">Email:</label>
      <input id="email" v-model="formData.email" type="email" placeholder="Enter your email" />
 
      <button type="submit">Submit</button>
    </form>
 
    <p>Name: {{ formData.name }}</p>
    <p>Email: {{ formData.email }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    handleSubmit() {
      alert(`Submitted! Name: ${this.formData.name}, Email: ${this.formData.email}`);
    }
  }
};
</script>

คำอธิบาย:

  • ใช้ v-model สำหรับการเชื่อมโยงข้อมูลในฟอร์มกับ formData
  • ใช้ @submit.prevent เพื่อป้องกันการรีเฟรชหน้าเมื่อส่งฟอร์ม

2. การตรวจสอบข้อมูล (Form Validation)

Vue.js รองรับการตรวจสอบข้อมูลฟอร์มได้อย่างง่ายดาย คุณสามารถเพิ่มการตรวจสอบใน methods หรือใช้ Library เช่น VeeValidate

การตรวจสอบข้อมูลแบบพื้นฐาน

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<template>
  <div>
    <h1>Form Validation</h1>
    <form @submit.prevent="validateForm">
      <label for="name">Name:</label>
      <input id="name" v-model="formData.name" type="text" />
      <span v-if="errors.name" style="color: red">{{ errors.name }}</span>
 
      <label for="email">Email:</label>
      <input id="email" v-model="formData.email" type="email" />
      <span v-if="errors.email" style="color: red">{{ errors.email }}</span>
 
      <button type="submit">Submit</button>
    </form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      },
      errors: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    validateForm() {
      this.errors = { name: '', email: '' }; // Reset errors
 
      if (!this.formData.name) {
        this.errors.name = 'Name is required';
      }
 
      if (!this.formData.email) {
        this.errors.email = 'Email is required';
      } else if (!this.validateEmail(this.formData.email)) {
        this.errors.email = 'Invalid email address';
      }
 
      if (!this.errors.name && !this.errors.email) {
        alert('Form submitted successfully!');
      }
    },
    validateEmail(email) {
      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return re.test(email);
    }
  }
};
</script>

คำอธิบาย:

  • ใช้ errors เพื่อเก็บข้อความแสดงข้อผิดพลาด
  • ใช้ฟังก์ชัน validateForm เพื่อตรวจสอบข้อมูลก่อนส่งฟอร์ม

3. การใช้ Library สำหรับ Form Validation

ติดตั้ง VeeValidate

1
npm install vee-validate@next

ตัวอย่างการใช้งาน VeeValidate

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<template>
  <div>
    <h1>Form with VeeValidate</h1>
    <form @submit.prevent="onSubmit">
      <label for="name">Name:</label>
      <input id="name" v-model="name" type="text" />
      <span style="color: red">{{ errors.name }}</span>
 
      <label for="email">Email:</label>
      <input id="email" v-model="email" type="email" />
      <span style="color: red">{{ errors.email }}</span>
 
      <button type="submit">Submit</button>
    </form>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import { useField, useForm } from 'vee-validate';
import * as yup from 'yup';
 
export default {
  setup() {
    const { handleSubmit, errors } = useForm();
 
    const { value: name } = useField('name', yup.string().required('Name is required'));
    const { value: email } = useField('email', yup.string().email('Invalid email').required('Email is required'));
 
    const onSubmit = handleSubmit(values => {
      alert(`Form submitted with: ${JSON.stringify(values)}`);
    });
 
    return {
      name,
      email,
      errors,
      onSubmit
    };
  }
};
</script>

คำอธิบาย:

  • ใช้ yup เพื่อกำหนดกฎการตรวจสอบข้อมูล
  • ใช้ useField และ useForm จาก VeeValidate สำหรับจัดการฟอร์มและข้อผิดพลาด

4. สรุป

ในบทนี้ คุณได้เรียนรู้:

  • การจัดการฟอร์มด้วย v-model และการส่งข้อมูล
  • การตรวจสอบข้อมูลด้วยวิธีพื้นฐานและการใช้ Library เช่น VeeValidate

ในบทถัดไป เราจะศึกษาการเพิ่ม Transition และ Animation ให้กับ Vue.js Component!