« WP-Syntax WordPress Plugin
Oracle DATE Format »

การใช้งาน Validations JavaScript Form

ที่จริงผมก็ได้ใช้ script ตัวนี้มานานมากแล้วครับตั้งแต่เริ่มเข้าวงการใหม่ๆ แต่ไม่เคยเอามาลง พอจะเอามาใช้ มันก็ลืมๆๆ เลยเอามาลงไว้ใน blog ซะเลย จะได้หาง่ายขึ้น อิอิ

ขั้นตอนที่ 1 แทรก code ด้านล่างไว้ระหว่าง tag head

1
2
3

...
<script language="JavaScript" src="js/gen_validatorv2.js" type="text/javascript"></script> 
...

ขั้นตอนที่ 2 สร้าง form และตั้งชื่อ form ด้วย เช่น

1
2
3
4
5

...
<form name="myform" action="">
...
</form>
...

ขั้นตอนที่ 3 แทรกคำสั่งด้านล่างต่อไปนี้ต่อจาก 

1
2
3
4
5

...
<script language="JavaScript">
	var frmvalidator  = new Validator("myform");
</script>
...

* myform คือชื่อของ from จากขั้นตอนที่ 2

ขั้นตอนที่ 4. คำสั่งสำหรับตรวจสอบ form input ต่าง ๆ ใช้คำสั่งนี้

1
2
3
4
5
6

...
<script language="JavaScript">
	var frmvalidator  = new Validator("myform");
	frmvalidator.addValidation("fieldname","validation", "msgalert");
</script>
...
  • fieldname คือชื่อของ field input ใน form
  • validation คือคำสั่งที่ต้องการตรวจสอบ ซึ่งจะมีดังต่อไปนี้
    • required หรือ req เป็นการตั้งให้ใส่ค่าลง field นี้เสมอ
    • maxlen=??? หรือ maxlength=??? ไว้ตรวจสอบจำนวนการใส่ค่าลง field นั้นได้สูงสุด เช่น ไม่เกิน 10 ตัวอักษรก็ใช้คำสั่ง “maxlen=10”
    • minlen=??? หรือ minlength=??? ไว้ตรวจสอบจำนวนการใส่ค่าลง field นั้นได้น้อยที่สุด เช่น ไม่เกิน 10 ตัวอักษรก็ใช้คำสั่ง “minlen=10”
    • alphanumeric หรือ alnum เป็นการตรวจสอบค่าที่ใส่ที่ครอบคลุมทั้งตัวเลขและตัวอักษร
    • num หรือ numeric เป็นการตรวจสอบตัวเลข
    • alpha หรือ alphabetic เป็นการตรวจสอบตัวอักษร
    • email เป็นการตรวจสอบความถูกต้องของรูปแบบอีเมล
    • lt=??? หรือ lessthan=??? เป็นการตรวจสอบค่าของข้อมูลว่าต้องเป็นตัวเลข และมีค่าไม่เกินเท่าไหร่ เช่น ต้องการค่าที่เป็นตัวเลขและไม่เกิน 1000 ก็ใส่ “lt=1000”
    • gt=??? หรือ greaterthan=??? เป็นการตรวจสอบค่าของข้อมูลว่าต้องเป็นตัวเลข และมีค่ามากกว่าเท่าไหร่ เช่น ต้องการค่าที่เป็นตัวเลขและมากกว่า 1000 ก็ใส่ “gt=1000”
    • regexp=??? เป็นการสร้าง regular expression ตามรูปแบบอื่น ๆ เช่นต้องการให้ใส่ตัวอักษรได้ไม่เกิน 10 ก็ใช้คำสั่ง “regexp=^[A-Za-z]{1,20}$”
    • dontselect=?? เป็นการตรวจสอบค่าใน selected input items ว่ามีการเลือกค่าไว้หรือเปล่า โดยกำหนดว่าค่าเริ่มต้นที่ห้ามเลือกคืออะไร เช่น selected input items กำหนดค่าเริ่มต้นไว้ที่ 0 ที่มี label ว่า Select one นั้นหมายความว่าห้ามเลือก label Select one เพราะเป็นค่าเริ่มต้น เราจะกำหนดแบบนี้ “dontselect=0”
  • msgalert ส่วนนี้เป็นใส่คำเตือนมีมีการตรวจสอบค่านั้น ๆ แล้วตรงตามเงื่อนไข จะได้เป็น 
1
2
3
4
5
6

...
<script language="JavaScript">
	var frmvalidator  = new Validator("myform");
	frmvalidator.addValidation("FirstName","alpha","Please input your First Name"); 
</script>
...

ตัวอย่าง

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

Code :
<form action="" name="myform" >
	<table cellspacing="2" cellpadding="2" border="0">
	<tr>
	  <td align="right">First Name</td>
	  <td><input type="text" name="FirstName"></td>
	</tr>
	<tr>
		<td align="right">Last Name</td>
		<td><input type="text" name="LastName"></td>
	</tr>
	<tr>
	  <td align="right">EMail</td>
	  <td><input type="text" name="Email"></td>
	</tr>
	<tr>
	  <td align="right">Phone</td>
	  <td><input type="text" name="Phone"></td>
	</tr>
	<tr>
		<td align="right">Address</td>
		<td><textarea cols="20" rows="5" name="Address"></textarea></td>
	</tr>
	<tr>
		<td align="right">Country</td>
		<td>
		<SELECT name="Country">
			<option value="" selected>[choose yours]
			<option value="008">Albania
			<option value="012">Algeria
			<option value="016">American Samoa
			<option value="020">Andorra
			<option value="024">Angola
			<option value="660">Anguilla
			<option value="010">Antarctica
			<option value="028">Antigua And Barbuda
			<option value="032">Argentina
			<option value="051">Armenia
			<option value="533">Aruba
		</SELECT>
		</td>
	</tr>
	<tr>
		<td align="right"></td>
		<td><input type="submit" value="Submit"></td>
	</tr>
</table>
</form>
<script language="JavaScript" type="text/javascript">
	 var frmvalidator = new Validator("myform");
	 frmvalidator.addValidation("FirstName","req","Please enter your First Name");
	 frmvalidator.addValidation("FirstName","maxlen=20",
	"Max length for FirstName is 20");
	 frmvalidator.addValidation("FirstName","alpha");
 
	 frmvalidator.addValidation("LastName","req");
	 frmvalidator.addValidation("LastName","maxlen=20");
 
	 frmvalidator.addValidation("Email","maxlen=50");
	 frmvalidator.addValidation("Email","req");
	 frmvalidator.addValidation("Email","email");
 
	 frmvalidator.addValidation("Phone","maxlen=50");
	 frmvalidator.addValidation("Phone","numeric");
 
	 frmvalidator.addValidation("Address","maxlen=50");
	 frmvalidator.addValidation("Country","dontselect=0");
</script>

สามารถดูตัวอย่าง และโหลดเวอร์ชั่นใหม่ได้ที่
Download : http://www.javascript-coder.com/html-form/javascript-form-validation.phtml

This entry was posted on Saturday, February 20th, 2010 at 5:05 pm and is filed under มุม Html, มุม Java, มุม PHP. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

One Response to “การใช้งาน Validations JavaScript Form”

  1. Tile Bathroom Says:
    December 25th, 2011 at 6:34 pm

    Tile Bathroom…

    […]การใช้งาน Validations JavaScript Form[…]…