มาศึกษา JavaScript แบบ OOP กันครับ (2010-07-07)
ผมทำ workshop ง่ายๆ ขึ้นมาคือทำ Class Vlidation สำหรับ Form
(ตอนนี้เช็คเฉพาะว่ามีค่าหรือเปล่าเท่านั้น simple ๆ ก่อนนะครับ)
มาดูกันก่อนว่าเราจะเขียน JavaScript แบบ OOP ได้อย่างไร
เริ่มกันที่ Class Validation ของผมก่อนนะครับ (ZengValidation.js)
function Validation()
{
this.ElementArray = new Array();
this.ErrorMessage = new Array();
this.AddElement = function(element,errorMessage) {
this.ElementArray.push(element);
this.ErrorMessage.push(errorMessage);
}
this.Validate = function()
{
for(i=0; i<this.ElementArray.length; i++)
{
if(document.getElementById(this.ElementArray[i]).value == "")
{
alert(this.ErrorMessage[i]);
document.getElementById(this.ElementArray[i]).focus();
return false;
}
}//for
return true;
}//function
}//Validation Class
|
Validation = Class
this.ElementArray , this.ErrorMessage เป็น Property ของ Class นะครับ
และเราก็ได้สร้าง Method ของ Class ขึ้นมา 2 ตัวคือ
AddElement - สำหรับเซ้ต element ใน form ที่เราจะเช็คค่า
Validate - สำหรับเช็คค่าใน element ของ form
ส่วนวิธีเรียกใช้ก็ง่ายๆ ครับ ดังตัวอย่างข้างล่างนี้
<HTML>
<HEAD>
<script type="text/javascript" src="ZengValidation.js"></script>
</HEAD>
<BODY>
<script>
var validation = new Validation();
validation.AddElement("name"," !!! Please input name !!!");
validation.AddElement("age"," !!! Please input age !!!");
</script>
<form onsubmit="return validation.Validate();">
<BR> Name : <input type="text" name="name" id="name">
<BR> Age : <input type="text" name="age" id="age">
<BR><input type="submit" value="test" >
</form>
</BODY>
</HTML> |
แค่นี้เราก็ได้ Validation Class สำหรับ Form แบบง่ายๆ แต่เท่ห์ อย่าบอกใครครับ คราวหน้าเรามาเพิ่มความสามารถของมันกัน
ใครมีปัญหาข้อข้องใจใดๆ ก็สามารถโพสถามกันได้เลยนะครับ ตอบได้ผมจะช่วยตอบทันทีครับ
| 
