การใช้งาน JavaScript Form Validations at Ford AntiTrust’s Blog

ข้อมูลอื่น ๆ เพิ่มเติม และ Download JavaScript Form Validations ได้ที่ http://www.javascript-coder.com/html-form/javascript-form-validation.phtml

1. ทำการแทรก

PLAIN TEXT

CODE:

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

ไว้ก่อนหน้า </head>

2. สร้าง form โดยมีการตั้งชื่อ form ด้วย เช่น

PLAIN TEXT

CODE:

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

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

PLAIN TEXT

CODE:

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

โดยที่ myform คือชื่อของ form นั้นๆ

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

PLAIN TEXT

CODE:

<script language="JavaScript">
var frmvalidator = new Validator("myform");
frmvalidator.addValidation("nameforminput","validation", "textalert");
</script>

โดยที่

nameforminput คือชื่อของ form input ของเรา
validation คือคำสั่งที่ต้องการตรวจสอบ ซึ่งจะมีดังต่อไปนี้

required หรือ req เป็นการตั้งให้ใส่ form input นี้เสมอ
maxlen=??? หรือ maxlength=??? เป็นการตรวจสอบค่าที่ใส่ลงไปว่ามีจำนวนตัวอักษรได้ไม่เกินค่าที่กำหนด เช่น ไม่เกิน 25 ตัวอักษรก็ใช้คำสั่ง "maxlen=25"
minlen=??? หรือ minlength=??? เป็นการตรวจสอบค่าที่ใส่ลงไปว่ามีจำนวนตัวอักษรได้ไม่ต่ำกว่าค่าที่กำหนด เช่น ไม่เกิน 25 ตัวอักษรก็ใช้คำสั่ง "minlen=25"
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"

textalert ส่วนนี้เป็นใส่คำเตือนมีมีการตรวจสอบค่านั้น ๆ แล้วตรงตามเงื่อนไข จะได้เป็น

PLAIN TEXT

CODE:

<script language="JavaScript">
var frmvalidator = new Validator("myform");
frmvalidator.addValidation("FirstName","alpha","Please insert alphabetic character");
</script>

ตัวอย่างการใช้งานโดยรวมทั้งหมด

PLAIN TEXT

CODE:

<form action="" name="myform">
<table cellspacing="2" cellpadding="2" border="0">
<tbody>
<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>
<option value="008">Albania </option>
<option value="012">Algeria </option>
<option value="016">American Samoa </option>
<option value="020">Andorra </option>
<option value="024">Angola </option>
<option value="660">Anguilla </option>
<option value="010">Antarctica </option>
<option value="028">Antigua And Barbuda </option>
<option value="032">Argentina </option>
<option value="051">Armenia </option>
<option value="533">Aruba </option>
</select> </td>
</tr>
<tr>
<td align="right"> </td>
<td><input type="submit" value="Submit" /></td>
</tr>
</tbody>
</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>

Thai Share This

3 Responses to “การใช้งาน JavaScript Form Validations”

Feed for this Entry Trackback Address

1 student
Sep 28th, 2006 at 11:17 am

good good good !!!
2 aa
Sep 3rd, 2007 at 12:34 pm

adfsdffsdf
3 Masuimi Max
Nov 8th, 2007 at 2:18 pm

Hi there…Thanks for the nice read, keep up the interesting posts..what a nice Thursday