ปลั๊กอินที่ใช้สำหรับตรวจสอบข้อมูล ของ jquery นั้นมีมากมายเสียเหลือเกิน คุณตี๋ เจ้าคุณปู่แห่ง jquerytips.com ได้เคยเขียนบทความ jQuery Validation ครบทุกเม็ดในการ validate นั่นก็เป็นตัวตรวจสอบความถูกต้องของข้อมูลในฟอร์ม ตัวหนึ่งที่เด็ดดวงเอามากๆ
วันนี้ผมไปเจอตัว validate อีกตัวหนึ่งที่เจ้าของเขาทำเสร็จแล้ว แต่ว่ายังไม่ได้เขียนอธิบายการใช้งาน ทำไว้แต่ตัวอย่างการใช้งาน ผมเห็นว่ามันน่าสนใจดี ก็เลยเอามาเขียนอธิบายเสียเลย
ดาวน์โหลดซ้อสต์ | Live Demo (คลิกปุ่มซับมิต แล้วจะเห็นผล)
หลังจากที่ท่านดาวน์โหลด ซ้อสต์โค้ดมาในนั้นจะมีตัวอย่างอยู่ด้วย ทีนี้เรามาดูวิธีการใช้งานกันดีกว่า
ก่อนอื่น include ไฟล์ที่จำเป็นเข้ามาก่อน
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.validationEngine.js"></script> <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" />
ต่อไปก็แค่เซ็ต ให้มัน validate โดยกำหนด เป็นคลาส ของตัวคอนโทรล ปลั๊กอินตัวนี้ มันจะเช็กตอนซับมิตฟอร์ม โดยอัตโนมัติ
<form action="" method="post" name="form1" id="form1"> <input name="username" type="text" class="validate[required]" /> <input name="" type="submit" value="submit" /> </form>
โค้ดทั้งหมดจะเป็นดังนี้ :
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.validationEngine.js"></script> <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" /> <title>Validator</title> </head> <body> <form action="" method="post" name="form1" id="form1"> <input name="username" type="text" class="validate[required]" /> <input name="" type="submit" value="submit" /> </form> </body> </html>
ท่านจะเห็นว่าในเท็กบ้อก ผมกำหนด class = validate[required] เวลาฟอร์มถูกซับมิต ตัวปลั๊กอินมันจะมามองหา class validate เมื่อเจอ มันก็จะมองต่อไปว่า จะให้มัน validate ตามกฎไหน ซึ่งก็คือคำที่อยู่ระหว่างเครื่องหมาย [ ]
ในกรณีที่ท่านต้องการให้ตรวจสอบ มากกว่า 1 เงื่อนไข ให้คั่นแต่ละเงื่อนไข ด้วย ,(comma) เช่น
<input name="username" type="text" class="validate[required,length[0,100]]" />กฎในการตรวจสอบทั้งหมด มีดังนี้
- required : ต้องป้อนข้อมูล
- length[0,20] : ป้อนข้อมูลได้ตั้งแต่ 0 – 20 ตัวอักษร (ตัวเลข ในช่อง [] ไปเปลี่ยนเอา )
- custom[noSpecialCaracters] : ห้ามป้อนอักขระพิเศษ เช่น . – ; $ เป็นต้น
- custom[onlyLetter] : ป้อนได้เฉพาะตัวหนังสือภาษาปะกิดเท่านั้น
- custom[onlyNumber] : ป้อนได้เฉพาะตัวเลข
- custom[email] : ป้อนอีเมล์ให้ถูกต้อง
- custom[date] : ต้องป้อนข้อมูลวัน ให้อยู่ในฟอร์แมต YYYY-MM-DD
- custom[telephone] : ป้อนเบอร์โทรศัพท์ให้ถูกต้อง อันนี้เป็นฟอร์แมตของ พี่กันเขานะครับ อย่าเอาไปใช้เลย
- minCheckbox[2] : เช็กเลือกเช็กบ้อกได้สูงสุด 2 ตัว (ตัวเลข ในช่อง [] ไปเปลี่ยนเอา ) ใช้กับเช็กบ้อกเท่านั้น
- confirm[password] : ค่าที่ป้อนในตัวนี้เท่ากับค่าที่ป้อนในเท็กบ้อกที่ชื่อ password หรือไม่ (id ของคอนโทรล ในช่อง [] เปลี่ยนเอา)
เอาละครับเพื่อความเข้าใจมากขึ้น ผมจะแสดงตัวอย่างการใช้งานเพิ่มเติม
ต้องป้อนข้อมูล อีเมล์
<input name="textbox" type="text" class="validate[required,custom[email]]" />ต้องป้อนข้อมูลอย่างน้อย 10 ตัว มากสุดได้ 100 ตัว และป้อนได้เฉพาะตัวหนังสือเท่านั้น
<input name="textbox" type="text" class="validate[required,length[10,100],custom[onlyLetter]" />ต้องป้อนข้อมูล ที่เป็นตัวเลขเท่านั้น
<input name="textbox" type="text" class="validate[required,custom[onlyNumber]" />ช่องยืนยันรหัสผ่าน ต้องป้อนให้ตรงกับรหัสผ่าน
<input type="password" name="yourpassword" id="yourpassword" /> <input type="password" name="passwordConfirm" id="passwordConfirm" class="validate[required,confirm[yourpassword]" />
เช็กบ้อก 3 ตัวนี้ คุณเลือกได้แค่ 2 ตัวนะ
<input class="validate[minCheckbox[2]]" type="checkbox" name="checkboxgroupe" value="5"> <input class="validate[minCheckbox[2]]" type="checkbox" name="checkboxgroupe" value="3"/> <input class="validate[minCheckbox[2]]" type="checkbox" name="checkboxgroupe" value="9"/>
ขอให้บุญที่ได้จากการถ่ายทอดปัญญา สู่บุคคลอื่น ได้ส่งผลให้ข้าพเจ้ามีปัญญา และจิตใจที่เข็มแข็ง ต่อสู้กับอุปสรรค์ได้อย่างไม่ย่อท้อ ด้วยเถิด สาธุ
credit : http://www.position-relative.net/
Optimize your PHP Code | Develops RV Global Soft Co.,Ltd. on 
mandmod on 
GIGAZAA on
25 Comments
ขอบคุณครับสำหรับบทความดีๆครับ เดี๊ยวลองเล่นดูก่อนครับอันนี้น่าสนใจมากๆครับ
ไม่เข้าใจตรงไหน คุยกันนะครับ
ขอบคุณครับสำหรับบทความดีๆครับ
validator ตัวนี้ใช้ง่ายได้ค่อนข้างง่าย และสะดวกมากมากครับ โดยส่วนตัวนะ ผมว่าเจ้าของ plugins ตัวนี้คงได้ idea มาจาก jquery.validator (ตัวเดียวกับ ที่คุณตี๋ เขียนแนะนำไว้ในบทความ)เพียงแต่ว่า นำมา implement ใหม่ให้ใช้งานได้ง่ายขึ้น ถ้าเอาแบบ validate แบบง่ายๆ ไม่มีเงื่อนไขอะไรมากมายก็ตัวนี้เลยครับ ถ้าแบบ advance ขั้นเทพ jquery.validator จะเหมาะกว่า
ส่วนตัวผมชอบตัวนี้อยู่ 2 อย่างครับ คือ idea การใช้ regular expression ตรงไปตรงมาดี กับ idea การทำ ballon ที่แสดง error message โดยการใช้ technic css เอา div ที่มี background สีดำมาเรียงต่อๆกัน ซึ่งไม่ต้องพึ่งรูปภาพเลยแม้แต่น้อย ส่วนที่ผมไม่ชอบคือ custom message มันยืดหยุ่นซักเท่าไหร่
ขอบคุณค่ะ
มีประโยชน์อย่างมากเลย ขอบคุณครับ
เป็นประโยชน์มากๆเลย ชอบๆ
เราจะเปลี่ยนคำพูด ที่แสดง error ได้ไหม? ถ้าได้ -> ยังไง? ตอบที ^^
คือผม..สงสัยอะครับ เวลาที่เราทำอย่าง เช่น insert เสร็จ คือไม่ต้องการให้ฟอร์มมันหายอะครับ.. อยากให้แค่ข้อมูลในฟอร์มหายไปเท่านั้น แล้วก็บอกว่าเราทำเรียบร้อยครับ…
เช่น…
เราเรียกใช้หน้า insert.php เข้ามา แล้วพอมันตรวจเสร็จก็จะไปหน้า insert.php พอ insert เสร็จมันดันแสดงแค่ว่า insert เรียบร้อย แต่ฟอร์มหายไป ต้องกด refresh จึงทำต่อได้..
หน้าหนัก…
…
…
ajaxSubmitMessage: “ข้อมูลได้ทำเสร็จเรียบร้อยครับ”,
success : false,
รบกวนตอบด้วยนะครับ..ขอบคุณมากเลยครับ
ตอบคุณมือใหม่ คุณต้องศึกษาเรื่อง AJAX ครับ ซึ่งตัว jQuery มีฟังก์ชั่น AJAX ให้ท่านใช้งานอยู่แล้ว
ขอบคุณที่สอนสิ่งดีๆให้ค่ะ ในทางศาสนาพุทธกล่าวว่า การสอนคนอื่นโดยไม่หวงความรู้ ทำให้ชาตินี้และชาติหน้าเป็นคนมีปัญญาหลักแหลมค่ะ ขอบคุณนะคะ
ขอบคุณ สำหรับบทความดีๆๆค่ะ ใช้ประโยชน์ได้มากเลยค่ะ
ขอบคุณมากค่ะ ได้ประโยชน์มากเลย ขอ share ด้วยนะคะ
ขอบคุณสำหรับการแบ่งปันความรู้ค่ะ เป็นประโยชน์มากเลยค่ะ
รบกวนสอบถามเกี่ยวกับ minCheckbox ค่ะ
เนื่องจาก checkbox ถูกตั้งชื่อเป็น ch[] ทำให้ validate ที่ชื่อ minCheckbox ไม่ทำงานค่ะ มีวิธีแก้ไขยังไงหรอค
แล้วถ้าจะเปลี่ยนกำหนดเป็นต้องเลือกอย่างน้อย 1 หัวข้อ จาก Code
“minCheckbox”:{ “regex”:”none”, “alertText”:”* Checks allowed Exceeded”}
ต้องเปลี่ยนเป็นอย่างไรหรอคะ
ขอบคุณค่ะ
ลืมถามอีกเรื่องค่ะ กรณีตรวจสอบพวกคำค้นหาอ่ะค่ะ
คือว่าอยากให้พิมพ์ตัวเลข,ภาษาอังกฤษ และภาษาไทยได้เท่านั้น
ต้องทำอย่างไรหรอคะ
ขอบคุณอีกครั้งค่ะ
อยากให้ตรวจสอบ textbox 2 ตัว ว่าพิมพ์ตรงกันหรือไม่ ตัวอย่าง เช่น การ confirm การเปลี่ยน password อ่ะค่ะ
ตรวจสอบ ช่องว่าง ใช้ \s หรือป่าวคะ ลองใช้แล้วไม่ได้ค่ะ
ขอบคุณที่แบ่งปันความรู้กันนะคะ เป็นประโยชน์มากเลย
แต่มีข้อสงสัยนิดนึงตรงที่ว่าจะเอา validate ตัวนี้ ไปใช้กับ select form
จะใช้ได้รึเปล่าคะ หรือว่า ใช้ได้แค่กับ textbox คือลองแล้วมันใช้ไม่ได้อ่ะคะ
รบกวนช่วยดูให้ทีนะคะ
ขอบคุณคะ
ได้ความรู้จากบทความนี้เอาไปใช้งานจริง ขอบคุณครับ
สุดยอดมากครับ
อยากได้ตรวจสอบไฟล์อับโหลดด้วยอะครับ เอาแบบไม่เกิน 500 kb ครับ มีไหมครับ ในสคริปต์นี้
format date มันเอาไปใช้ค่ะ รูปแบบ class=”validate[custom[date]]”" แล้วมัน require ทำอย่างไรดีค่ะ ต้องแก้ตรงไหนเพิ่มรึเปล่าคะ
อยากจะ ห้ามเว้นวรรค อ่ะค่ะ ต้องทำยังไง
รบกวนด้วยนะค่ะ
ขอบคุณสำหรับโค๊ด และมีเรื่องอยากทราบอีกครับ ถ้าเราทำให้เช็คเลขบัตรประชาชน 13 หลักต้องดัดแปลงโค๊ดอย่างไรบ้างครับ
อยากทราบเหมืแอนกันครับ ว่าถ้าเราทำให้เช็คเลขบัตรประชาชน 13 หลักต้องดัดแปลงโค๊ดอย่างไรบ้างครับ