Function Validation

การสร้าง Function Validation สร้างขึ้น เพื่อ Validation ข้อความที่ผู้ใช้กรอกเข้ามา โดยหลังจากสร้าง Function Validation เรียบร้อยแล้ว เราจะทดสอบใน Vue Project และใช้ Vuetify เข้ามาร่วมด้วย

โดยมีทฤษฎีและโปรแกรมที่จำเป็นมีดังนี้

• Visual Studio Code
• Node.js
• Vue.js
• Vuetify
• JavaScript
• Regular Expression

การสร้าง Function Validation ในที่นี้ จำเป็นต้องมีความรู้ดังนี้

• regex ย่อมากจาก Regular Expression คือ รูปแบบหรือกลุ่มคำที่กำหนดขึ้น
  เพื่อค้นหาข้อความหรือตัวอักษรต่างๆ ว่าตรงตามเงื่อนไขที่กำหนดไว้หรือไม่
  ซึ่ง Regular Expressions สามารถใช้ได้กับทุกภาษาโปรแกรม แต่ format ใน
  การเขียนจะแตกต่างกันออกไป
• การสร้าง Function ในภาษา JavaScript โดยใช้การสร้าง Function แบบ Arrow Function ซึ่ง Arrow Function คือ การสร้าง Function รูปแบบใหม่ที่สั้นและกระชับกว่าเดิมในภาษา JavaScript ES6 และ Typescript

ขั้นตอนต่อไปเราจะมาเริ่มสร้าง Function Validation กัน (｡>‿‿<｡)
โดยขั้นตอนการสร้างมีทั้งหมด 5 ขั้นตอน ดังนี้

1.สร้างโฟลเดอร์สำหรับเก็บ Project

โฟลเดอร์นี้เป็นโฟลเดอร์ที่ทำหน้าที่เก็บไฟล์ต่างๆ โดยตัวอย่างที่นำมา
ใช้ชื่อว่า Function Validation ที่ Drive C → Project → Function Validation

จากนั้นให้เปิดโฟลเดอร์ที่สร้างไว้ ลงในโปรแกรม Visual Studio Code

2.ติดตั้ง vue/cli และสร้าง Vue Project

การติดตั้ง vue/cli นั้น เพื่อให้สามารถสร้าง Vue Project โดยมี Tool และ Library
ที่จำเป็นต่อการสร้าง Project มาให้ และสามารถติดตั้ง vue/cli ได้ โดยพิมพ์คำสั่ง npm install @vue/cli -g

หลังติดตั้ง vue/cli เรียบร้อยแล้ว จากนั้นให้สร้าง Vue Project โดยพิมพ์คำสั่ง
vue create <project name> ซึ่ง <project name> เป็นชื่อ Project ที่ต้องการ
ใช้ ในที่นี้ใช้ชื่อ Project ว่า validation ดังนั้นคำสั่งการสร้าง Vue Project คือ
vue create validation

เมื่อกด Enter หลังจากพิมพ์คำสั่ง vue create validation แล้ว จะมีข้อความขึ้นให้เลือก Preset การสร้าง Vue Project มีให้เลือก 3 อย่าง คือ

- Default ([Vue 2] babel, eslint) → เป็นการสร้าง Project โดย Babel คือ Feature สำหรับ Compile JavaScript และส่วน Eslint คือ Feature ตรวจสอบ Error ของ Code

- Default (Vue 3 Preview) ([Vue 3] babel, eslint) → เป็นตัว Preview สำหรับ Vue3 ให้ผู้พัฒนาการเว็บไซต์ได้ลองใช้ก่อน

- Manually Select Features → เป็นการสร้าง Project โดยต้องเลือก Feature ต่างๆ ที่ต้องการใช้ใน Vue Project ด้วยตนเอง

และเมื่อติดตั้งเรียบร้อยแล้ว ต้องพิมพ์คำสั่ง cd <directory> เพื่อเปลี่ยน directory จากโฟลเดอร์ Function Validation ไปยังโฟลเดอร์ Validation โดยชื่อ Vue Project ของเราคือ validation ดังนั้นคำสั่ง คือ cd validation

3.ติดตั้ง Vuetify

ที่ต้องติดตั้ง Vuetify นั้น เพื่อใช้ในขั้นตอนทดสอบ Function Validation ที่สร้างไว้ เนื่องจาก การเรียกใช้ Function Validation ต้องเรียกใช้ภายใต้ Property ที่ชื่อ rules ซึ่ง Property นี้มีแค่ใน Vuetify และมีคำสั่งการติดตั้ง คือ vue add vuetify

เมื่อกด Enter หลังจากพิมพ์คำสั่ง vue add vuetify แล้ว จะมีข้อความขึ้นให้เลือก Preset การติดตั้ง Vuetify มีให้เลือก 3 อย่าง คือ

- default (recommended)

- Prototype (rapid development)

- Configure (advanced)

4.สร้าง File validation.js

ในที่นี้ได้สร้าง File .js ชื่อ validation.js ซึ่งเป็น File ที่เก็บ Function Validation
โดย Function Validation คือ Function ที่จะแจ้งเตือนผู้ใช้เป็นข้อความ เมื่อผู้ใช้กรอกข้อความ ไม่ตรงตาม Format ที่กำหนดไว้ และถ้าผู้ใช้กรอกข้อความถูกต้องตรงตาม Format ข้อความแจ้งเตือนจะหายไป

**โดยเราจะสร้าง File validation.js ในโฟลเดอร์ src

การสร้าง Function Validation สามารถแบ่งได้เป็น 2 ส่วน ดังนี้

- ส่วน regex → regex ย่อมาจาก Regular Expressions เป็นการกำหนดรูปแบบหรือกลุ่มคำ เพื่อเอาไว้ใช้ค้นหาข้อความต่างๆ ที่ต้องการ

- ส่วน text → ส่วนกำหนดข้อความแจ้งเตือน หากตัว regex ไม่เป็นไปตาม Format ที่กำหนด จะแสดงข้อความแจ้งตือนที่กำหนดไว้

และเมื่อสร้าง Function Validation เรียบร้อยแล้วต้องประกาศ export defualt ด้วย
ซึ่ง export defualt มีไว้เพื่อให้ Function ทุก Function สามารถเรียกใช้งานได้

โดยแต่ละ Function มีวิธีการทำงานดังนี้

1. Function required
   เป็น Function ที่จะแจ้งเตือน เมื่อ Text-Field ว่างเปล่า เนื่องจากผู้ใช้ไม่กรอกข้อมูลลงใน Text-Field นั้นๆ
2. Function numberOnly
   เป็น Function ที่จะแจ้งเตือน เมื่อผู้ใช้กรอกอักษรอื่น ที่ไม่ใช่ตัวเลข 1–10
3. Function engLangOnly
   เป็น Function ที่จะแจ้งเตือน เมื่อผู้ใช้กรอกตัวอักขระพิเศษ ตัวเลข และกรอกภาษาอื่นๆ ที่ไม่ใช่ภาษาอังกฤษ
4. Function thaiLangOnly
   เป็น Function ที่จะแจ้งเตือน เมื่อผู้ใช้กรอกตัวอักขระพิเศษ ตัวเลข และกรอกภาษาอื่นๆ ที่ไม่ใช่ภาษาไทย (ตัวเลขไทยก็ไม่สามารถกรอกได้)
5. Function thai_engLanguage
   เป็น Function ที่จะแจ้งเตือน เมื่อผู้ใช้กรอกตัวอักขระพิเศษ ตัวเลข และกรอกภาษาอื่นๆ ที่ไม่ใช่ภาษาไทยและภาษาอังกฤษ
6. Function password
   เป็น Function ที่จะแจ้งเตือน เมื่อผู้ใช้กรอก password ไม่ถูก format โดยมี format คือ สามารถกรอกได้แค่ภาษาอังกฤษ ตัวเลข อักขระพิเศษที่กำหนดไว้เท่านั้น และต้องกรอกอักษรอย่างต่ำ 8 ตัวอักษร
7. Function email
   เป็น Function ที่จะแจ้งเตือน เมื่อผู้ใช้กรอก email ไม่ถูก format โดยจำเป็นต้องมี @ และ .com หรือ . อื่นๆ
8. Function phoneNumber
   เป็น Function ที่จะแจ้งเตือน เมื่อผู้ใช้กรอกเบอร์โทรศัพท์ไม่ถูกต้อง ซึ่งสามารถกรอกได้ทั้งเบอร์โทรศัพท์และเบอร์สำนักงานที่ขึ้นต้นด้วย 02
9. Function creditCard
   เป็น Function ที่จะแจ้งเตือน เมื่อผู้ใช้กรอกเลขบัตรเครดิตไม่ถูกต้อง โดยต้องกรอกให้ครบ 16 ตัวเลข
10. Function idcard ,Function idcard2, Function idCard
    เป็น Function 3 Function ที่ต้องทำงานร่วมกัน โดยตอนเรียกใช้ให้เรียกใช้แค่ Function idcard และ Function idCard ซึ่งเป็น Function ที่จะแจ้งเตือน เมื่อผู้ใช้กรอกเลขบัตรประชาชนไม่ครบ 13 หลักและกรอกเลขบัตรประชาชนปลอม
11. Function car_license_plate
    เป็น Function ที่จะแจ้งเตือน เมื่อผู้ใช้กรอกเลขทะเบียนรถยนต์ไม่ถูกต้อง
    โดยมี format คือ กข 1234 หรือ 1กข 1234
12. Function text
    เป็น Function ที่จะแจ้งเตือน เมื่อผู้ใช้กรอกตัวเลขและอักขระพิเศษที่ไม่ได้กำหนดไว้ โดยสามารถกรอกได้แค่ภาษาไทย ภาษาอังกฤษ และอักขระพิเศษ
    บางตัวเท่านั้น
13. Function text_num
    เป็น Function ที่จะแจ้งเตือน เมื่อผู้ใช้กรอกอักขระพิเศษอื่นๆ ที่ไม่ได้กำหนดไว้
    โดยสามารถกรอกได้แค่ภาษาไทย ภาษาอังกฤษ ตัวเลขและอักขระพิเศษบางตัว

5.ทดลองเรียกใช้ Function และ Validation ข้อความ ที่หน้าเว็บไซต์

การเรียกใช้ Function Validation ที่สร้างขึ้นนั้น สามารถเรียกใช้ได้ใน File HelloWorld.vue ในโฟลเดอร์ src → components → HelloWorld.vue

จากนั้นให้แก้ไข Code ใน File HelloWorld.vue เพื่อสร้าง Text-Field และเรียกใช้ Function ที่สร้างขึ้น ตาม Code ด้านล่างนี้

**โดยบาง Function ที่สร้างขี้นนั้น เป็น Function ที่ต้องการ property ซึ่งสามารถดูได้จาก Function ใน File validation.js ว่า Function ไหนมีคำว่า property Function นั้นๆ ก็จะเป็น Function ที่ต้องการ property นั่นเอง โดยการใส่ property สามารถดูได้จากชื่อ label ของ Text-Filed นั้นๆ

จากตัวอย่าง Code ด้านบนนี้จะเห็นว่า Function thai_engLanguage มีตัวแปร property ดังนั้นเมื่อนำมาเรียกใช้ใน Text-Field ก็จำเป็นต้องใส่ property ให้ Function ด้วย โดยก็อป label มาใส่ได้เลย ในที่นี้ label คือ “Name (Thai & Eng)”

การเรียกใช้ Function จำเป็นต้อง import File validation.js เข้ามาใน
File HelloWorld.vue แล้วเรียกใช้ใน Function data ก่อน จึงจะสามารถ
เรียกใช้ Function ได้ การเรียกใช้นั้น ต้องเรียกใช้ภายใต้ property ที่ชื่อ rules

การ import File validation.js เข้ามาใน
File HelloWorld.vue

ตัวอย่างการเรียกใช้ Function ที่ property rules ใน Text-Field

จากนั้น เราจำเป็นต้องประกาศตัวแปรสำหรับรับค่าข้อความของแต่ละ Text-Field
เพื่อให้สามารถพิมพ์ข้อความต่างๆ ลงไปใน Text-Field ได้ ซึ่งดูชื่อตัวแปรได้จาก
property v-model

จากตัวอย่าง Code ด้านบนนี้ Text-Field มี v-model ชื่อ passWord ดังนั้นต้องนำ passWord มาประกาศใน Function data

จากนั้นจะมาลอง Validation ข้อความที่หน้าเว็บไซต์กัน ─=≡Σ((( つ•̀ω•́つ)
ให้พิมพ์คำสั่ง npm run serve ใน Terminal เพื่อรันหน้าเว็บไซต์ และจะได้ Link มาดังรูปภาพด้านล่างนี้

จากรูปด้านบนจะเห็นว่า มี Link 2 Link คือ แบบ Local และ Network ซึ่งสามารถกดเปิดได้ 2 Link โดยสามารถกด Ctrl ที่คีย์บอร์ดค้างไว้ แล้วคลิกที่ Link ที่ต้องการเปิด

เมื่อกดเปิด Link แล้ว จะได้หน้าตาเว็บไซต์ตามด้านล่างนี้ (⑉• ﻌ •⑉)

ขั้นตอนสุดท้ายยยย!! ทดลอง Validation ข้อความในแต่ละ Text-Field 〤◕‿◕〤

การทำงานของ Function required

การทำงานของ Function password

การทำงานของ Function email

การทำงานของ Function thai_engLanguage

การทำงานของ Function engLangOnly

การทำงานของ thaiLangOnly

การทำงานของ Function phone Number

การทำงานของ Function credirCard

การทำงานของ Function idcard, icard2 และ idCard

การทำงานของ Function car_license_plate

และหากทดลองกรอกทุก Text-Field ด้วยข้อความที่ถูกต้อง ตรงตาม format
ที่กำหนดไว้ ข้อความแจ้งเตือนของทุกๆ Text-Field ก็จะหายไป ლ( ´͈ ◡` ͈ლ)

สรุป
การสร้าง Function Validation นั้น คือ การสร้าง Function ไว้ เพื่อตรวจสอบข้อความที่ผู้ใช้กรอกเข้ามาที่หน้าเว็บไซต์ โดยจะแจ้งเตือนเมื่อผู้ใช้กรอกข้อความไม่ตรงตาม format ที่กำหนด และข้อความแจ้งเตือนจะหายไป เมื่อผู้ใช้กรอกข้อความถูกต้อง ตรงตาม format ที่กำหนด ซึ่งการสร้าง Function Validation นั้น จำเป็นต้องใช้ Regular Expression เข้ามาช่วย นการตรวจสอบข้อความที่รับเข้ามาจาก Text-Field