การตรวจสอบความถูกต้องของชื่อผู้ใช้ (Username) สำหรับบุคลากรมหาวิทยาลัยบูรพา เพื่อเข้าใช้งานระบบสารสนเทศของมหาวิทยาลัย ด้วย jQuery

การสร้างหน้าเว็บสำหรับการเข้าสู่ระบบ (Log In) ของผู้ใช้งาน ถือว่าเป็นส่วนหนึ่งของการพัฒนาระบบสารสนเทศในฝ่ายพัฒนาระบบ ซึ่งในการพัฒนาหน้าเว็บการเข้าสู่ระบบนั้น จะต้องมีการตรวจสอบความถูกต้องของชื่อผู้ใช้งานว่ามีความถูกต้องหรือไม่ ดังนั้นองค์ความรู้ที่จะนำเสนอ คือ การตรวจสอบความถูกต้องชื่อผู้ใช้ที่เป็นบุคลากรมหาวิทยาลัยบูรพา ด้วย jQuery โดยในบทความนี้จะนำเสนอหน้าเว็บการเข้าสู่ระบบ (Log In) กับระบบสารสนเทศที่พัฒนาด้วย Laravel คือ ระบบบริหารทรัพยากรบุคคลมหาวิทยาลัยบูรพา ซึ่งแบ่งเป็นขั้นตอนการดำเนินการ ดังนี้

1. สร้างไฟล์สำหรับแสดงข้อมูลการเข้าสู่ระบบที่หน้าเว็บไซต์ โดยตั้งชื่อเป็น login.blade.php ที่โฟลเดอร์ resources/views/backend/login ซึ่งมีรายละเอียดดังนี้

– การ Include ไฟล์ formValidation.css และไฟล์ validation.css ดังภาพที่ 1

ภาพที่ 1 หน้าจอแสดงโปรแกรมการ Include ไฟล์ formValidation.css และไฟล์ validation.css

– การสร้าง Input สำหรับกรอกข้อมูลชื่อผู้ใช้ (Username) ดังภาพที่ 2

ภาพที่ 2 หน้าจอแสดงโปรแกรมการสร้าง Input สำหรับกรอกข้อมูลวันเดือนปี

– การ Include ไฟล์ formValidation.min.js และไฟล์ bootstrap4.min.js ดังภาพที่ 3

ภาพที่ 3 หน้าจอแสดงโปรแกรมการ Include ไฟล์ formValidation.min.js และไฟล์ bootstrap4.min.js

– การเขียนโปรแกรมเพื่อตรวจสอบความถูกต้องของชื่อผู้ใช้ (Username) ในรูปแบบ jQuery ดังภาพที่ 4

ภาพที่ 4 หน้าจอแสดงโปรแกรมสำหรับตรวจสอบความถูกต้องของชื่อผู้ใช้ ด้วย jQuery

2. หลังจากได้ทำตามทุกขั้นตอนแล้ว ก็ทำการประมวลผลโปรแกรม ซึ่งผลลัพธ์ที่ได้

– กรณีที่กรอกชื่อผู้ใช้เป็นตัวเลขทั้งหมด แสดงดังภาพที่ 5

ภาพที่ 5 หน้าจอแสดงผลลัพธ์ของโปรแกรม ที่ชื่อผู้ใช้เป็นตัวเลขทั้งหมด

– กรณีที่กรอกชื่อผู้ใช้เป็นตัวอักษรภาษาอังกฤษผสมกับตัวเลข แสดงดังภาพที่ 6

ภาพที่ 6 หน้าจอแสดงผลลัพธ์ของโปรแกรม ที่ชื่อผู้ใช้เป็นตัวอักษรภาษาอังกฤษผสมกับตัวเลข

อ้างอิง

https://regex101.com/r/yX4gG8/3

https://buu-person.buu.ac.th/