ปลั๊กอินที่ใช้สำหรับตรวจสอบข้อมูล ของ 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/

class email jQuery Live Demo
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ