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

javascript19.zip

ประเภทไฟล์ zip

ขนาดไฟล์ 1.14 KB

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

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


กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 19 มกราคาม 2561
โดย Parichat ศ 19 ม.ค. 2018 8:52 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
1
8
ศ 19 ม.ค. 2018 7:33 pm โดย Parichat
งานประจำวันที่ 19 มกราคม 2561
โดย Jom07 ศ 19 ม.ค. 2018 8:43 am บอร์ด MT23 - สุพรรษา พูลตา
1
24
ศ 19 ม.ค. 2018 9:20 am โดย Jom07
งานประจำวันที่ 19 มกราคม 2561
โดย Four ศ 19 ม.ค. 2018 8:42 am บอร์ด MT22 - อิษยา งามสอาด
4
23
ศ 19 ม.ค. 2018 6:43 pm โดย Four
ตัวแปรชนิด Tuple
โดย Four พฤ 18 ม.ค. 2018 5:18 pm บอร์ด Python Knowledge
0
33
พฤ 18 ม.ค. 2018 5:18 pm โดย Four
ขอสอบถามเรื่องความแตกต่างของฟังก์ชั่นvariant_pow()กับฟังก์ชั่น pow()
โดย Parichat พฤ 18 ม.ค. 2018 1:58 pm บอร์ด Programming - PHP
0
29
พฤ 18 ม.ค. 2018 1:58 pm โดย Parichat
อยากได้โปรแกรม command แบบ cmd ที่เก็บ history ได้ค่ะช่วยเเนะนำหน่อย
โดย thatsawan พฤ 18 ม.ค. 2018 11:18 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
54
พฤ 18 ม.ค. 2018 7:18 pm โดย thatsawan
0vsNULL
โดย Before Dong พฤ 18 ม.ค. 2018 10:32 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
41
พฤ 18 ม.ค. 2018 2:51 pm โดย Before Dong
งานประจำวันที่ 18 มกราคม 2561
โดย Parichat พฤ 18 ม.ค. 2018 9:38 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
1
13
พฤ 18 ม.ค. 2018 7:16 pm โดย Parichat
งานประจำวันที่ 18 มกราคม 2561
โดย Jom07 พฤ 18 ม.ค. 2018 9:27 am บอร์ด MT23 - สุพรรษา พูลตา
2
34
พฤ 18 ม.ค. 2018 6:49 pm โดย Before Dong
งานประจำวันที่ 18 มกราคม 2561
โดย Four พฤ 18 ม.ค. 2018 9:24 am บอร์ด MT22 - อิษยา งามสอาด
1
23
พฤ 18 ม.ค. 2018 11:44 am โดย Four
VDO สอนพัฒนา Componet Joomla ภาษาอังกฤษ By Mindphp Developer Team
โดย mindphp พฤ 18 ม.ค. 2018 6:21 am บอร์ด Joomla Development
0
30
พฤ 18 ม.ค. 2018 6:21 am โดย mindphp
Ozio Gallery-Components & Plugins สำหรับช่วยให้ดูภาพที่เผยแพร่บน Googleและวีดีโอจาก Youtube ที่ละเอียด
โดย Parichat พ 17 ม.ค. 2018 7:30 pm บอร์ด Joomla Extension Review
0
51
พ 17 ม.ค. 2018 7:30 pm โดย Parichat
ตัวดำเนินการของตัวแปร List
โดย Four พ 17 ม.ค. 2018 4:35 pm บอร์ด Python Knowledge
0
34
พ 17 ม.ค. 2018 4:35 pm โดย Four
การใช้ Del statement
โดย Four พ 17 ม.ค. 2018 4:03 pm บอร์ด Python Knowledge
0
30
พ 17 ม.ค. 2018 4:03 pm โดย Four
Review Applications 17 มกราคม 2561
โดย Jom07 พ 17 ม.ค. 2018 3:44 pm บอร์ด MT23 - สุพรรษา พูลตา
1
18
พ 17 ม.ค. 2018 6:19 pm โดย Jom07
การใช้ Precedence
โดย Four พ 17 ม.ค. 2018 3:36 pm บอร์ด Python Knowledge
0
32
พ 17 ม.ค. 2018 3:36 pm โดย Four
โครงสร้าง Module
โดย tsukasaz พ 17 ม.ค. 2018 3:08 pm บอร์ด Joomla Dev
0
9
พ 17 ม.ค. 2018 3:08 pm โดย tsukasaz
Index VDO Reenigne – คุณวีรศักดิ์ - odoo 10
โดย Four พ 17 ม.ค. 2018 2:33 pm บอร์ด MT22 - อิษยา งามสอาด
0
8
พ 17 ม.ค. 2018 2:33 pm โดย Four
งานประจำวันที่ 17 มกราคม 2561
โดย Four พ 17 ม.ค. 2018 9:56 am บอร์ด MT22 - อิษยา งามสอาด
3
34
พ 17 ม.ค. 2018 4:36 pm โดย Four
Work's on Hand ปาริชาติ รัตโณภาส MT21
โดย Parichat จ 08 ม.ค. 2018 12:11 pm บอร์ด MT21 - ปาริชาติ รัตโณภาส
2
52
พ 17 ม.ค. 2018 10:51 am โดย Parichat