×

คำเตือน

JUser: :_load: Unable to load user with ID: 6465

ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 19 JavaScript Form Validation


    JavaScript สามารถเขียนคำสั่งเพื่อตรวจสอบการป้อนข้อมูลในฟอร์มก่อนที่จะส่งข้อมูลนั้นไปประมวลผลที่เซิร์ฟเวอร์ เช่น การตรวจสอบฟิลด์ที่ต้องป้อนข้อมูล ,ตรวจสอบการ ป้อนข้อมูลอีเมลล์, ตรวจสอบการป้อนข้อมูลวันที่ , ตรวจสอบการป้อนข้อมูลตัวเลข เป็นต้น
     Form Validation คือ การตรวจสอบข้อมูลของฟอร์ม เป็นขั้นตอนที่ช่วยในการตรวจสอบให้ข้อมูลที่รับจากฟอร์ม HTML   มีความถูกต้อง ตรงตามที่ต้องการให้มากที่สุด ซึ่งนิยมนำไปใช้มากที่สุดคือการตรวจสอบ (Validation) form ของผู้ใช้ในหน้าเว็บ ซึ่งเป็นเว็บไซต์แบบที่มีการกรอกข้อมูล information จากผู้ใช้จำนวนมากในรูปแบบของ form online และ JavaScript  สามารถช่วยตรวจสอบข้อผิดพลาดในส่วนต่างๆได้ ซึ่งการตรวจสอบจะเป็นในลักษณะ Client-Side หรือ การทำงานจะเกิดขึ้นที่เครื่องที่เปิดใช้งานเว็บเบราเซอร์   เมื่อเราใช้เว็บเบราเซอร์เปิดไปเว็บเพจที่มีการกรอกข้อมูลใดๆ เช่น  เว็บเพจสำหรับสมัครสมาชิก  ผู้พัฒนาเว็บเพจนั้นได้เขียนโค้ด JavaScript  เพื่อตรวจสอบการกรอกข้อมูลไว้ในเว็บเพจนั้นแล้ว  เช่น ตรวจสอบรูปแบบการกรอกข้อมูล E-mail เป็นต้น    โค้ด JavaScript เหล่านั้น  จะถูกส่งมาให้เว็บเบราเซอร์ไปเปิดใช้งาน  เพื่อให้เว็บเบราเซอร์ทำหน้าที่ประมวลผลคำสั่งและตรวจสอบข้อมูลให้    เป็นการตรวจสอบที่เครื่องคอมพิวเตอร์ที่ติดต่อไปขอใช้บริการ  จึงเรียกว่าวิธีการ Client-Side  แบ่งได้ดังนี้
  1.Required Fields (การเช็คข้อมูลทั่วไป) โดยจะเช็คว่าผู้ใช้งานเว็บไซต์นั้นได้กรอกข้อมูลหรือไม่ เพราะถ้าผู้ใช้ยังไม่ได้กรอกข้อมูล ก็จะไม่สามารถกด ยืนยัน (Submit) ได้
     มี Syntax ดังนี้


function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
  {  alert("First name must be filled out");
  return false;  }
}

 

ตัวอย่างเช่น


<html><head>
<script>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
  {  alert("First name must be filled out");
  return false;  }
}

</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body></html>

 

ผลลัพธ์คือ

***จากตัวอย่างนี้เป็นตัวอย่างการตรวจสอบการกรอกข้อมูลชื่อ ซึ่ง javascript จะทำการตรวจสอบว่าผู้ใช้เว็บไซต์ได้กรอกจริงหรือไม่ ถ้าหากไม่ได้กรอกข้อมูลใดลงไปเลย ก็จะมีข้อความแจ้งเตือน (ตามรูปด้านล่าง) เพื่อเตือนให้ผู้ใช้ไม่ลืมกรอกข้อมูลชื่อ




2.E-mail Validation (การตรวจเช็คอีเมล) โดยจะเช็คว่าข้อมูลที่ผู้ใช้เว็บไซต์ได้กรอกอีเมลหรือไม่ หรือกรอกอีเมลผิดหรือไม่
   มี Syntax ดังนี้


function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Not a valid e-mail address");
  return false;  }
}

 

ตัวอย่างเช่น


<html><head>
<script>
function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {  alert("Not a valid e-mail address");
  return false;  }
}

</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body></html>

 

ผลลัพธ์คือ

***จากตัวอย่างนี้เป็นตัวอย่างการตรวจสอบอีเมล โดยจะเช็คว่าผู้ใช้เว็บไซต์ได้กรอกอีเมลแล้วหรือยัง หรือกรอกอีเมลผิดหรือไม่ ถ้าหากไม่ได้กรอก หรือกรอกผิด ก็จะมีข้อความแจ้งเตือน (ตามรูปด้านล่าง) เพื่อเตือนให้ผู้ใช้ไม่ลืมกรอกข้อมูลอีเมล


คลิกเพื่อดู demo file javascript
(ตัวอย่างที่ 1)
คลิกเพื่อดู demo file javascript (ตัวอย่างที่ 2)

ข้อมูลอ้างอิง
http://www.w3schools.com

ชื่อ
javascript19
หมวดหมู่
Javascript, Javascript
ฮิต
13562
ผู้สร้างเอกสาร
วันที่สร้างเอกสาร
2016-06-03 13:43:17

javascript19.zip

ประเภทไฟล์ zip

ขนาดไฟล์ 1.14 KB

ผู้อัพโหลดไฟล์

วันที่อัพโหลด 2016-06-03 06:42:43


กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 18 ตุลาคม 2561
โดย tai14 พฤ 18 ต.ค. 2018 10:04 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
0
1
พฤ 18 ต.ค. 2018 10:04 am โดย tai14
VDO - วิธีการแปลงไฟล์ไพธอนเป็นไฟล์ .exe
โดย prakon พฤ 18 ต.ค. 2018 10:04 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
0
1
พฤ 18 ต.ค. 2018 10:04 am โดย prakon
งานประจำวันที่ 18 ตุลาคม 2561
โดย prakon พฤ 18 ต.ค. 2018 10:00 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
0
2
พฤ 18 ต.ค. 2018 10:00 am โดย prakon
งานประจำวันที่ 18 ตุลาคม 2561
โดย nice_13 พฤ 18 ต.ค. 2018 9:55 am บอร์ด M071 - พิชญ์สินี คงจร
0
1
พฤ 18 ต.ค. 2018 9:55 am โดย nice_13
เเนะนำเรียนต่อต่างประเทศ
โดย Anonymous พ 17 ต.ค. 2018 10:09 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
5
พ 17 ต.ค. 2018 10:09 pm โดย บุคคลทั่วไป
Q - สอบถามวิธีการเแปลงไฟล์ Python เป็นไฟล์ .exe ครับ
โดย prakon พ 17 ต.ค. 2018 7:37 pm บอร์ด Programming - C/C++ & java & Python
0
9
พ 17 ต.ค. 2018 7:37 pm โดย prakon
VDO - รีวิว Module Manufacturer สำหรับแสดงผู้ผลิตสินค้า
โดย pprn พ 17 ต.ค. 2018 6:55 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
5
พ 17 ต.ค. 2018 6:55 pm โดย pprn
R - mdsoft_translate_posts ปรับเปลี่ยนแทมเพลตและภาษา
โดย Ittichai_chupol พ 17 ต.ค. 2018 6:34 pm บอร์ด ThaiVI - Developer
0
6
พ 17 ต.ค. 2018 6:34 pm โดย Ittichai_chupol
VDO - รีวิว Module Bestseller (โมดูล เบสต์เซลเลอร์) สำหรับแสดงสินค้าขายดี
โดย pprn พ 17 ต.ค. 2018 6:29 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
6
พ 17 ต.ค. 2018 6:29 pm โดย pprn
R - mdsoft_show_member_post การแสดงข้อมูลของสมาชิก
โดย Ittichai_chupol พ 17 ต.ค. 2018 6:27 pm บอร์ด ThaiVI - Developer
0
1
พ 17 ต.ค. 2018 6:27 pm โดย Ittichai_chupol
VDO - รีวิว Module currency (โมดูล เคอเร็นซิ) สำหรับเลือกสกุลเงินของสินค้า
โดย pprn พ 17 ต.ค. 2018 5:43 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
5
พ 17 ต.ค. 2018 5:43 pm โดย pprn
VDO - รีวิว Module Latest products (โมดูล เลทเอ็ซท์ โปรดักส์) สำหรับแสดงสินค้าล่าสุด
โดย pprn พ 17 ต.ค. 2018 4:49 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
6
พ 17 ต.ค. 2018 4:49 pm โดย pprn
เมื่อหัดเขียนเว็บไซต์ครั้งแรก
โดย tai14 พ 17 ต.ค. 2018 4:39 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
7
พ 17 ต.ค. 2018 4:39 pm โดย tai14
B - สรุป Review เว็บไซต์ zirishoes.com
โดย tsukasaz พ 17 ต.ค. 2018 12:14 pm บอร์ด สิริกิตติรัตน์ - Tester
1
12
พ 17 ต.ค. 2018 1:16 pm โดย mindphp
ขออนุญาตสอบถามครับ ผมมือใหม่
โดย 9kitti พ 17 ต.ค. 2018 11:25 am บอร์ด Programming - PHP
1
11
พ 17 ต.ค. 2018 12:18 pm โดย thatsawan
R - mdsoft_search_share (ค้นหาข้อมูลหุ้น)
โดย Ittichai_chupol พ 17 ต.ค. 2018 11:23 am บอร์ด ThaiVI - Developer
0
12
พ 17 ต.ค. 2018 11:23 am โดย Ittichai_chupol
R - Extension_Search_Share
โดย Ittichai_chupol พ 17 ต.ค. 2018 10:56 am บอร์ด M070 - อิทธิชัย ชูผล
0
5
พ 17 ต.ค. 2018 10:56 am โดย Ittichai_chupol
งานประจำวันที่ 17 ตุลาคม 2561
โดย prakon พ 17 ต.ค. 2018 10:19 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
15
พ 17 ต.ค. 2018 7:12 pm โดย prakon
งานประจำวันที่ 17 ตุลาคม 2561
โดย pprn พ 17 ต.ค. 2018 10:18 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
13
พ 17 ต.ค. 2018 7:22 pm โดย pprn
งานประจำวันที่ 17 ตุลาคม 2561
โดย tai14 พ 17 ต.ค. 2018 9:46 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
3
พ 17 ต.ค. 2018 7:08 pm โดย tai14