ส่วนมากแล้ว ผมจะใช้ Regular Expression ตรวจสอบความถูกต้องจากการกรอกข้อมูลในอินพุตต่างๆ เช่น ใน Textfileld,Check Box,Combobox ฯลฯ รวมถึงการแยกข้อมูลที่ต้องการออกมาจากอีกข้อมูลหนึ่ง เช่น แยกตัวเลขที่อยู่ใน [123] ออกมา โดยไม่ต้องมีเครื่องหมาย [] ติดมาด้วย ผมจึงเห็นว่ามันสะดวกดีครับ มันจะช่วยประหยัดเวลาในการเขียนโค๊ด ทำให้เขียนโค๊ดได้สั้นลง และมีความแม่นยำในการตรวจสอบสูงมากครับ และสามารถปรับเปลี่ยน Pattern ได้สะดวก เวลาต้องการเพิ่มความสามารถในการตรวจสอบอินพุตใดๆ เช่น กำหนดให้กรอกข้อมูลตั้งแต่ 4 ตัวอักษรขึ้นไป
โดยใช้คำสั่ง ^[a-zA-Z0-9]{4}
แต่เวลาต่อมา ต้องการเปลี่ยนให้กรอกตั้งแต่ 4-20 ตัวอักษรเท่านั้น ก็สามารถแก้ไขคำสั่งใน Pattern ได้ง่าย โดยแก้เป็น
^[a-zA-Z0-9]{4,20}$
เห็มไหมครับว่าง่ายและสะดวกขนาดไหน ^^ มันเป็นพื้นฐานที่โปรแกรมเมอร์ทุกคนต้องรู้ครับ เพราะมันมีประโยชน์ในการจัดการกับข้อมูลต่างๆได้ดีมาก
มาดูโค๊ดตัวอย่างกันเลยครับ ผมได้เขียนแยกเป็น 2 ไฟล์ คือ javascript-validate.php กับ php-validate.php
หมายถึงเราจะเขียนโค๊ดตรวจสอบข้อมูลของแต่ละภาษาแยกออกจากกัน เพื่อให้เห็นความแตกต่างของแต่ละภาษาครับ
javascript-validate.php -> ไฟล์ตรวจสอบอินพุต (จากฝั่ง Client) ด้วยจาวาสคริปต์ ให้พิมพ์โค๊ดดังนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Javascript Validate</title> <script type="text/javascript"> function chkForm(){ var numb=document.getElementById("numb"); var chkNumb=/^\d+$/; //Pattern ตรวจสอบข้อมูลที่เป็นตัวเลขเท่านั้น var email=document.getElementById("email"); var chkEmail=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+/; //Pattern ตรวจสอบอีเมล เช่น 123-abc_@hotmail.co.th var txt=document.getElementById("txt").value; var chkStr=/^[a-zA-Z0-9]{5,16}$/;//Pattern ตรวจสอบการกรอกตัวอักษร 5-16 ตัวอักษร var str4=document.getElementById("str4").value; var chk4=/^[a-zA-Z0-9]{4}/;//Pattern ตรวจสอบการกรอกข้อมูล 4 ตัวอักษรขึ้นไป var errMsg=""; if(numb.value.search(chkNumb)){ errMsg="กรุณาป้อนข้อมูลเป็นตัวเลข\n"; } if(email.value.search(chkEmail)){ errMsg+="กรอกอีเมลไม่ถูกต้อง\n"; } if(txt.search(chkStr)){ errMsg+="กรอกข้อมูล5-16ตัวอักษร\n"; } if(str4.search(chk4)){ errMsg+="กรอกข้อมูล 4 ตัวอักษรขึ้นไป"; } if(errMsg==""){ return true; }else{ alert(errMsg); return false; } } </script> </head> <body> <form id="form1" name="form1" method="post" action="" onsubmit="return chkForm();"> <p> <label for="numb">ป้อนตัวเลข </label> <input type="text" name="numb" id="numb" /> </p> <label for="email">ป้อนอีเมล </label> <input type="text" name="email" id="email" /> <p> <label for="txt"> ป้อนตัวเลขและตัวอักษร 5-16 ตัว</label> <input type="text" name="txt" id="txt" /> </p> <label for="str4">ป้อนข้อมูล 4 ตัวอักษรขึ้นไป</label> <input type="text" name="str4" id="str4" /> <p> <input type="submit" name="button" id="button" value="Submit" /> </p> </form> </body> </html>
php-validate.php -> ไฟล์ตรวจสอบอินพุต (จากฝั่ง Server) ด้วยพีเอชพี ให้พิมพ์โค๊ดดังนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>PHP Validate</title> </head> <body> <?php if($_POST['btSubmit']!=''){ $numb=$_POST['numb']; $chkNumb='/^\d+$/';//Pattern ตรวจสอบข้อมูลที่เป็นตัวเลขเท่านั้น $email=$_POST['email']; $chkEmail='/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9._-])+\.([a-zA-Z])+$/';//Patern ตรวจสอบอีเมล เช่น 123-abc_@hotmail.co.th $str=$_POST['str']; $chkTxt='/^[a-zA-Z0-9]{5,16}$/';//Pattern ตรวจสอบการกรอกตัวอักษร 5-16 ตัวอักษร $str4=$_POST['str4']; $chk4='/^[a-zA-Z0-9]{4}+/';//Pattern ตรวจสอบการกรอกข้อมูล 4 ตัวอักษรขึ้นไป if(!preg_match($chkNumb,$numb,$regs)){ echo 'กรอกข้อมูลเป็นตัวเลข'; } if(!preg_match($chkEmail,$email,$regs)){ echo 'กรอกอีเมลไม่ถูกต้อง'; } if(!preg_match($chkTxt,$str,$regs)){ echo 'กรอกข้อมูล 5-16 ตัวอักษร'; } if(!preg_match($chk4,$str4,$regs)){ echo 'กรอกข้อมูล 4 ตัวอักษรขึ้นไป'; } } ?> <hr /> <form id="form1" name="form1" method="post" action=""> <p> <label for="numb">ป้อนตัวเลข</label> <input type="text" name="numb" id="numb" /> </p> <p> <label for="email"> ป้อนอีเมล</label> <input type="text" name="email" id="email" /> </p> <label for="str">ป้อนตัวเลขและตัวอักษร 5-16 ตัวอักษร</label> <input type="text" name="str" id="str" /> <p> <label for="str4">ป้อนข้อมูล 4 ตัวอักษรขึ้นไป </label> <input type="text" name="str4" id="str4" /> </p> <p> <input type="submit" name="btSubmit" id="btSubmit" value="Send" /> </p> </form> </body> </html>
โดยความจริงแล้ว เราควรใช้โค๊ดทั้งสองแบบในการตรวจสอบข้อมูลครับ เพราะ Javascript จะทำงานในฝั่งไคลเอนท์ และ PHP จะทำงานจากฝั่งเซิร์ฟเวอร์ จาวาสคริปต์ จะช่วยตรวจสอบก่อนจากฝั่งไคลเอนท์ โดยที่ไม่ต้องรีโหลดหน้าเว็บ
ทำให้มีความสะดวกมากกว่าที่จะใช้ พีเอชพี ตรวจสอบจากฝั่งเซิร์ฟเวอร์ แต่จาวาสคริปต์สามารถถูกปิดการทำงานได้จากBrowser จึงต้องมีพีเอชพีตรวจสอบข้อมูลต่ออีกครั้งครับ
ไม่มีความคิดเห็น :
แสดงความคิดเห็น