ข้อมูลอื่น ๆ เพิ่มเติม และ Download JavaScript Form Validations ได้ที่ http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
1. ทำการแทรก
CODE:
-
<script language="JavaScript" src="gen_validatorv2.js" type="text/javascript"></script>
ไว้ก่อนหน้า </head>
2. สร้าง form โดยมีการตั้งชื่อ form ด้วย เช่น
CODE:
-
<form name="myform" action="">
-
<!----Your input fields go here -->
-
</form>
3. แทรกคำสั่งด้านล่างต่อไปนี้
CODE:
-
<script language="JavaScript">
-
var frmvalidator = new Validator("myform");
-
</script>
โดยที่ myform คือชื่อของ form นั้นๆ
4. คำสั่งสำหรับตรวจสอบ form input ต่าง ๆ ใช้คำสั่งนี้
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 ส่วนนี้เป็นใส่คำเตือนมีมีการตรวจสอบค่านั้น ๆ แล้วตรงตามเงื่อนไข จะได้เป็น
CODE:
-
<script language="JavaScript">
-
var frmvalidator = new Validator("myform");
-
frmvalidator.addValidation("FirstName","alpha","Please insert alphabetic character");
-
</script>
ตัวอย่างการใช้งานโดยรวมทั้งหมด
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>
