×

คำเตือน

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
ฮิต
13604
ผู้สร้างเอกสาร
วันที่สร้างเอกสาร
2016-06-03 13:43:17

javascript19.zip

ประเภทไฟล์ zip

ขนาดไฟล์ 1.14 KB

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

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


กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Training-ไพธอนและซิลิเนียม
โดย prakon ส 20 ต.ค. 2018 11:13 pm บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
0
3
ส 20 ต.ค. 2018 11:13 pm โดย prakon
Q- สอบถามครับผม ตั้งตั้ง Module pythainlp ไม่ได้
โดย tatiya ส 20 ต.ค. 2018 6:16 pm บอร์ด Programming - C/C++ & java & Python
0
10
ส 20 ต.ค. 2018 6:16 pm โดย tatiya
ทรัพย์สินที่ต้องเสียภาษีการรับมรดก
โดย nice_13 ส 20 ต.ค. 2018 3:13 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
7
ส 20 ต.ค. 2018 3:13 pm โดย nice_13
ทำอย่างไรถึงจะได้ ภ.พ.20
โดย nice_13 ส 20 ต.ค. 2018 2:53 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
7
ส 20 ต.ค. 2018 2:53 pm โดย nice_13
Q - วิธีการสร้าง like เพื่อที่จะส่งค่าไปยังไฟล์ controller ใน phpbb
โดย Ittichai_chupol ส 20 ต.ค. 2018 2:31 pm บอร์ด Programming - PHP
1
15
ส 20 ต.ค. 2018 2:34 pm โดย thatsawan
R - Template thai vi - ทั้ง 3 ขนาด
โดย thatsawan ส 20 ต.ค. 2018 12:15 pm บอร์ด ThaiVI - Developer
0
3
ส 20 ต.ค. 2018 12:15 pm โดย thatsawan
งานประจำวันที่ 20 ตุลาคม 2561
โดย tatiya ส 20 ต.ค. 2018 10:06 am บอร์ด M065 - ตติยะ นาชัย
1
3
ส 20 ต.ค. 2018 9:08 pm โดย tatiya
งานประจำวันที่ 20 ตุลาคม 2561
โดย nice_13 ส 20 ต.ค. 2018 10:00 am บอร์ด M071 - พิชญ์สินี คงจร
1
2
ส 20 ต.ค. 2018 7:20 pm โดย nice_13
งานประจำวันที่ 20 ตุลาคม 2561
โดย Ittichai_chupol ส 20 ต.ค. 2018 9:39 am บอร์ด M070 - อิทธิชัย ชูผล
1
5
ส 20 ต.ค. 2018 7:11 pm โดย Ittichai_chupol
ionic error
โดย Anonymous ส 20 ต.ค. 2018 9:21 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
11
ส 20 ต.ค. 2018 10:29 am โดย mindphp
เมื่อ User ถามหางานที่บันทึกไว้จาก IT
โดย tai14 ศ 19 ต.ค. 2018 3:25 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
29
ศ 19 ต.ค. 2018 3:25 pm โดย tai14
โปรเจคทั่วไป VS โปรจคที่มีผลกับโบนัส
โดย tai14 ศ 19 ต.ค. 2018 2:23 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
ศ 19 ต.ค. 2018 2:23 pm โดย tai14
งานประจำวันที่ 19 ตุลาคม 2561
โดย prakon ศ 19 ต.ค. 2018 10:03 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
12
ศ 19 ต.ค. 2018 7:05 pm โดย prakon
งานประจำวันที่ 19 ตุลาคม 2561
โดย pprn ศ 19 ต.ค. 2018 9:25 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
4
ศ 19 ต.ค. 2018 6:28 pm โดย pprn
งานประจำวันที่ 19 ตุลาคม 2561
โดย Ittichai_chupol ศ 19 ต.ค. 2018 9:09 am บอร์ด M070 - อิทธิชัย ชูผล
1
6
ศ 19 ต.ค. 2018 6:51 pm โดย Ittichai_chupol
งานประจำวันที่ 19 ตุลาคม 2561
โดย tai14 ศ 19 ต.ค. 2018 9:05 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
4
ศ 19 ต.ค. 2018 6:17 pm โดย tai14
งานประจำวันที่ 19 ตุลาคม 2561
โดย tatiya ศ 19 ต.ค. 2018 9:04 am บอร์ด M065 - ตติยะ นาชัย
1
6
ศ 19 ต.ค. 2018 7:01 pm โดย tatiya
งานประจำวันที่ 19 ตุลาคม 2561
โดย nice_13 ศ 19 ต.ค. 2018 8:58 am บอร์ด M071 - พิชญ์สินี คงจร
1
3
ศ 19 ต.ค. 2018 6:37 pm โดย nice_13
Q - วิธีแก้ไข้ error จากการสร้าง extension เพื่อให้แสดง module ที่แถบเมนู ใน PHPBB
โดย Ittichai_chupol พฤ 18 ต.ค. 2018 7:27 pm บอร์ด Programming - PHP
2
34
ศ 19 ต.ค. 2018 2:39 pm โดย Ittichai_chupol
มาดูปัญหาจอคอมที่แผนกไอทีต้องเจอ
โดย tai14 พฤ 18 ต.ค. 2018 6:15 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
38
พฤ 18 ต.ค. 2018 6:15 pm โดย tai14