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

javascript19.zip

ประเภทไฟล์ zip

ขนาดไฟล์ 1.14 KB

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

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


กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ทำความรู้จักกับ Google Lighthouse ตรวจสอบคุณภาพเว็บไซต์
โดย birdkritsna พฤ 19 ก.ย. 2019 6:37 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
6
พฤ 19 ก.ย. 2019 6:37 pm โดย birdkritsna
ส่วนประกอบของเว็บไซต์ มีอะไรบ้าง
โดย aninthana พฤ 19 ก.ย. 2019 6:12 pm บอร์ด Web Hosting Review - Free Host Share Host VPS
0
7
พฤ 19 ก.ย. 2019 6:12 pm โดย aninthana
วิธีทำภาพให้มีขอบโค้งมนด้วยโปรแกรม คล้าย photoshop ออนไลน์ freephototool.com
โดย jamepiyawat พฤ 19 ก.ย. 2019 5:51 pm บอร์ด Graphic design
1
12
พฤ 19 ก.ย. 2019 11:15 pm โดย pipoipi
วิธีการอัพเกรด Ubuntu server เพื่อให้ support และ เพิ่มความสามารถใหม่ๆ ของระบบปฏิบัติการ
โดย jirawoot พฤ 19 ก.ย. 2019 4:14 pm บอร์ด Linux - Web Server
1
14
ศ 20 ก.ย. 2019 12:06 am โดย cocomax
form มันซ้อนกันอยู่ทำให้ form ที่อยู่ด้านในส่งข้อมูลไม่ได้ทำยังไงดี ครับ
โดย jamepiyawat พฤ 19 ก.ย. 2019 3:57 pm บอร์ด Programming - PHP
2
11
พฤ 19 ก.ย. 2019 4:20 pm โดย jamepiyawat
R - Template และ laout
โดย mindphp พฤ 19 ก.ย. 2019 3:13 pm บอร์ด buildinstore - Manual & Content Web
0
1
พฤ 19 ก.ย. 2019 3:13 pm โดย mindphp
G - subdomain ที่จะไปอยู่ที่เว็บไซต์อื่น
โดย mindphp พฤ 19 ก.ย. 2019 3:12 pm บอร์ด Buildin - Tester
0
1
พฤ 19 ก.ย. 2019 3:12 pm โดย mindphp
เฟสบุ๊แฟนเพจ กับ ทำเว็บไซต์ให้คนเข้า อะไรคุ้มกว่าในระยะยาว
โดย zend_framework พฤ 19 ก.ย. 2019 11:06 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
5
พฤ 19 ก.ย. 2019 11:06 am โดย zend_framework
Q - อยากทราบวิธีการดึงค่า api มาใช้อย่างไรครับ
โดย birdkritsna พฤ 19 ก.ย. 2019 10:50 am บอร์ด Programming - PHP
5
38
พฤ 19 ก.ย. 2019 6:25 pm โดย birdkritsna
งานประจำวันที่ 19 กันยายน 2562
โดย Patipat พฤ 19 ก.ย. 2019 10:49 am บอร์ด M088 - ปฏิภัทร สารธรรม
1
4
พฤ 19 ก.ย. 2019 7:22 pm โดย Patipat
อยากทราบวฺิธีการทำปุ่มเพิ่มตัวเลย ครับ
โดย jamepiyawat พฤ 19 ก.ย. 2019 10:39 am บอร์ด Programming - PHP
6
35
พฤ 19 ก.ย. 2019 6:44 pm โดย jamepiyawat
งานประจำวันที่ 19 กันยายน 2562
โดย birdkritsna พฤ 19 ก.ย. 2019 10:19 am บอร์ด M094 - กฤษณะ จะโรจน์รัมย์
1
10
พฤ 19 ก.ย. 2019 7:44 pm โดย birdkritsna
งานประจำวันที่ 19 กันยายน 2562
โดย jamepiyawat พฤ 19 ก.ย. 2019 10:09 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
2
12
พฤ 19 ก.ย. 2019 7:36 pm โดย jamepiyawat
งานประจำวันที่ 19 กันยายน 2562
โดย aninthana พฤ 19 ก.ย. 2019 10:04 am บอร์ด M092 - อนินธนา บุญยัง
1
8
พฤ 19 ก.ย. 2019 7:04 pm โดย aninthana
งานประจำวันที่ 19 กันยายน 2562
โดย jirawoot พฤ 19 ก.ย. 2019 10:03 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
1
3
พฤ 19 ก.ย. 2019 8:34 pm โดย jirawoot
ถ้าจะให้้มีคนกดซับเพิ่มขึ่นต้องทำไง
โดย totzazx789 พ 18 ก.ย. 2019 10:40 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
17
พ 18 ก.ย. 2019 10:40 pm โดย totzazx789
สอบถามเกี่ยวกับ list ใน Tkinter ค่ะ
โดย mashato พ 18 ก.ย. 2019 8:45 pm บอร์ด Programming - C/C++ & java & Python
0
15
พ 18 ก.ย. 2019 8:45 pm โดย mashato
ทำกราฟ เปรียบเทียบ ค่าธรรมเนียมของแต่ละธนาคาร
โดย chatee supasand พ 18 ก.ย. 2019 7:24 pm บอร์ด MT33 - นายชาตรี สุภาแสน
1
7
พ 18 ก.ย. 2019 7:29 pm โดย mindphp
ทำไมต้องอัพเกรดและวิธีอัพเกรด Ubuntu
โดย jirawoot พ 18 ก.ย. 2019 7:02 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
20
พ 18 ก.ย. 2019 7:02 pm โดย jirawoot
Adobe Premiere Pro เปิดตัวฟีเจอร์ปรับขนาดเฟรมวิดีโออัตโนมัติด้วย AI รองรับโซเชียลแอป
โดย birdkritsna พ 18 ก.ย. 2019 6:05 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
27
พ 18 ก.ย. 2019 6:05 pm โดย birdkritsna