สอนทำ Validate Form โดยใช้ Regular Expression ด้วยภาษา Javascript และ PHP
ส่วนมากแล้ว ผมจะใช้ 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 จึงต้องมีพีเอชพีตรวจสอบข้อมูลต่ออีกครั้งครับ
ความคิดเห็น
แสดงความคิดเห็น