บทเรียนที่ 29 การตรวจข้อมูลในแบบฟอร์ม
ตัวอย่างนี้จะนำคุณกลับมาที่การใช้แบบฟอร์ม โปรแกรมจะใช้จาวาสคริปตรวจสอบข้อมูลที่ผู้ใช้พิมพ์ลงไป ว่าถูกต้อง หรือเป็นไปตามที่เราต้องการหรือไม่ ในตัวอย่างนี้ เราจะให้ผู้ใช้พิมพ์ชื่อลงไปในกล่องข้อความ แล้วให้พิมพ์หมายเลขบัตรประชาชนซึ่งมี 13 หลัก ลงในกล่องข้อความถัดไป ซึ่งต้องให้แน่ใจว่า 13 หลักนั้นเป็นตัวเลข ไม่ใช่ตัวหนังสือ และผู้ใช้ต้องพิมพ์ครบทั้ง 13 หลัก การตรวจสอบข้อมูลถือเป็นงานสำคัญอย่างหนึ่งของโปรแกรมเมอร์
ตัวอย่างนี้ยังนำคุณกลับสู่การใช้ส่วนประกอบ(property)ที่ชื่อว่า length (ซึ่งใช้บอกจำนวนตัวอักษรและตัวเลขทั้งหมด) และมีวิธีกระทำใหม่ได้แก่ indexOf( ) กับ charAt( ) (ยังจำได้ไหมครับ ว่าวิธีกระทำจะเอาไว้ใช้กับตัวถูกกระทำ และตามมาด้วยเครื่องหมายวงเล็บเสมอ) โปรแกรมนี้จะแสดงชุดคำสั่ง ที่ยาวมากกว่าที่คุณเคยเห็นมาก่อน คุณพร้อมแล้วใช่ไหม ?...ต้องใช่อยู่แล้วครับ!
สคริป..
<html><head><script language="javascript"> function validfn(fnm) { fnlen=fnm.length if (fnlen == 0) {alert("โปรดกรอกชื่อของคุณก่อนครับ") document.dataentry.fn.focus()} } function validnum(num) { len=num.length digits="0123456789" if(len != 13) {alert("เลขบัตรประจำตัวประชาชนไม่ครบ 13 หลักครับ โปรดกรอกใหม่") document.dataentry.num.focus()} for(i=0; i<13; i++) {if (digits.indexOf(num.charAt(i))<0) {alert("โปรดพิมพ์ด้วยตัวเลขทั้งหมดครับ") document.dataentry.num.focus() break} } }</script></head><body><form name="dataentry"><center><h2>การตรวจสอบข้อมูลในแบบฟอร์ม</h2>โปรดกรอกชื่อของคุณ <INPUT TYPE="text" NAME="fn" onBlur="validfn(fn.value)"><script language="javascript"> document.dataentry.fn.focus()</script> <p>โปรดกรอกเลขบัตรประจำตัวประชาชนของคุณ <INPUT TYPE="text" NAME="num" SIZE=20> <P> <INPUT TYPE="button" VALUE="กดที่นี่เพื่อส่งข้อมูล" onClick="validnum(num.value)"></center></form></body></html>ผลของสคริปนี้...
กดที่นี่หนึ่งครั้งเพื่อให้สคริปทำงานได้
มาแยกโครงสร้างของสคริปกันครับ
· สคริปนี้มี 2 ชุดคำสั่งคือ validfn() และ validnum() ซึ่งชุดคำสั่งแรก ใช้ตรวจสอบชื่อของผู้ใช้ และชุดคำสั่งถัดมาใช้ตรวจสอบเลขบัตรประชาชน เรามาดูที่ชุดคำสั่งแรกก่อนครับ...
function validfn(fnm) { fnlen=fnm.length if (fnlen == 0) {alert("โปรดกรอกชื่อของคุณก่อนครับ") document.dataentry.fn.focus()} } ...... ...... โปรดกรอกชื่อของคุณ <INPUT TYPE="text" NAME="fn" onBlur="validfn(fn.value)">
· ( เป็นคำสั่ง HTML แสดงการเว้นวรรค1 ครั้งครับ) ชุดคำสั่ง validfn(fn.value) ถูกเรียกให้ทำงานด้วย onBlur ซึ่งจะเกิดขึ้นเมื่อผู้ใช้คลิ๊กออกจากกล่องข้อความ ที่ชื่อ fn
· สังเกตว่า fn.value ถูกส่งไปยังชุดคำสั่งในชื่อ fnm ซึ่ง fn.value ย่อมาจาก document.dataentry.fn.value แต่ว่ากล่องข้อความนี้อยู่ใน document และแบบฟอร์มชื่อ dataentry มาตั้งแต่ต้นแล้ว จึงไม่จำเป็นที่ต้องพิมพ์คำสั่งเต็ม (หากไม่เข้าใจ โปรดย้อนกลับไปอ่านบทที่ 8)
· fnlen เป็นชื่อที่ถูกตั้งขึ้นมาแทนค่า fnm.length ซึ่งเป็นค่าความยาวของชื่อ ซึ่งหากผู้ใช้พิมพ์ชื่อว่า... "นิติพูม" ความยาวของชื่อ(fnm.length) จะเท่ากับ 7 ซึ่งต้องนับสระด้วยครับ
· ถ้าความยาวของชื่อเท่ากับศูนย์(แปลว่าผู้ใช้ยังไม่ได้พิมพ์อะไรลงไป) กล่องข้อความเตือนจะขึ้นว่า "โปรดกรอกชื่อของคุณก่อนครับ" และนำคุณเข้าการพิมพ์อีกครั้ง(มีขีดกระพริบในกล่องข้อความ ด้วยคำสั่ง document.dataentry.fn.focus() )
· เรามาดูส่วนที่ตรวจสอบหมายเลขบัตรประจำตัวประชาชนกันครับ...
· function validnum(num)
· {
· len=num.length
· digits="0123456789"
· if(len != 13)
· {alert("เลขบัตรประจำตัวประชาชนไม่ครบ 13 หลักครับ โปรดกรอกใหม่")
· document.dataentry.num.focus()}
· · for(i=0; i<13; i++)
· {if (digits.indexOf(num.charAt(i))<0)
· {alert("โปรดพิมพ์ด้วยตัวเลขทั้งหมดครับ")
· document.dataentry.num.focus()
· break}
· }
· .............................
· <INPUT TYPE="button" VALUE="กดที่นี่เพื่อส่งข้อมูล"
onClick="validnum(num.value)">
· ส่วนนี้ยาวพอสมควร เราจะค่อยๆไล่ทีละบรรทัดครับ บรรทัดแรกนั้นนำ num.value ซึ่งเป็นตัวเลขหรือข้อความที่ผู้ใช้พิมพ์ลงไป แทนค่าด้วย num (ไม่เกี่ยวกับชื่อกล่องข้อความที่ถามเลขบัตรฯ) เข้ามาในชุดคำสั่ง len=num.length เรากำหนดให้ len เป็นตัวแทนของความยาวตัวเลขหรือข้อความ digits="0123456789" เรากำหนดให้ digits เป็นตัวแทนของตัวเลข(ในรูปข้อความ)ตั้งแต่ 0 ถึง 9
· if จะตรวจว่าผู้ใช้พิมพ์เข้ามาครบ 13 หลักหรือไม่ ถ้าไม่เท่า(ใช้ว่า != แปลว่าไม่เท่ากับ) กล่องข้อความเตือนจะขึ้นว่า "เลขบัตรประจำตัวประชาชนไม่ครบ 13 หลักครับ โปรดกรอกใหม่" และจะนำกลับเข้าสู่การพิมพ์อีกครั้ง(มีขีดกระพริบในกล่องเลขบัตรฯ)
· for(i=0; i<13; i++) หมายถึงการวนตั้งแต่ i=0 ถึง i=12 รวมทั้งหมด 13 ครั้ง ซึ่งคำสั่งที่จะวนได้แก่...
o if (digits.indexOf(num.charAt(i))<0) มี 2 คำสั่งอยู่ในนี้ เริ่มจาก num.charAt(i) เป็นคำสั่งเรียกค่าตัวอักษรในตำแหน่งของข้อความ ที่กำหนดภายในวงเล็บ ซึ่งในที่นี้คือ 0 หากเริ่มวนคำสั่งครั้งแรก(i = 0) สมมติว่าผู้ใช้พิมพ์ลงไปว่า "กขค" num.charAt(1) คือ "ข"
o digits.indexOf() เป็นคำสั่งตรวจค่าที่อยู่ในวงเล็บ หากค่าที่อยู่ในวงเล็บมีอยู่ใน digits เช่นกัน digits.indexOf จะมีค่าเท่ากับ 1 และหากไม่มี จะให้ค่าเท่ากับ -1
o โปรแกรมจะตรวจสอบตัวเลขหรืออักษรในทุก 13 ตำแหน่ง ไล่ตั้งแต่ซ้ายไปขวา (ตามคำสั่ง for และค่า i ที่ทำให้ตำแหน่งการตรวจเลื่อนไปเรื่อยๆ) หากมีตัวใดตัวหนึ่งไม่ใช่ตัวเลข digits.indexOf(num.charAt(ตำแหน่งที่ไม่ใช่ตัวเลข)) จะเท่ากับ -1 และทำให้เงื่อนไขเป็นจริง(เพราะ -1 น้อยกว่า 0) กล่องข้อความเตือนก็จะขึ้นว่า "โปรดพิมพ์ด้วยตัวเลขทั้งหมดครับ"
o break มีไว้ใช้หยุดการวนคำสั่งด้วย for (ผมต้องขออภัยในบทที่แล้วซึ่งไม่ได้อธิบายไว้) หากคุณลบ break ทิ้ง เมื่อผู้ใช้พิมพ์ตัวอักษรไปในช่องที่ให้ใส่เลขบัตรทั้ง 13 หลัก แล้วกดปุ่ม กล่องเตือน "โปรดพิมพ์ด้วยตัวเลขทั้งหมดครับ" จะขึ้นมาทั้งหมด 13 ครั้ง เพราะ for ยังทำการวนต่อไป ด้วยเหตุนี้เราจึงต้องใส่ break ไว้ในเงื่อนไขด้วยครับ
· และท้ายสุดเป็นโค้ด HTML ที่สร้างแบบฟอร์มครับ...
· <form name="dataentry"><center>
· <h2>การตรวจสอบข้อมูลในแบบฟอร์ม</h2>
· · โปรดกรอกชื่อของคุณ
· <INPUT TYPE="text" NAME="fn"
· onBlur="validfn(fn.value)">
· · <script language="javascript">
· document.dataentry.fn.focus()
· </script>
· · <p>
· · โปรดกรอกเลขบัตรประจำตัวประชาชนของคุณ
· <INPUT TYPE="text" NAME="num" SIZE=20>
· · <P>
· · <INPUT TYPE="button" VALUE="กดที่นี่เพื่อส่งข้อมูล"
· onClick="validnum(num.value)">
</center></form>
· ทุกครั้งที่คุณสร้างแบบฟอร์มและชนิดของฟอร์มภายใน คุณควรจะตั้งชื่อไว้ เพื่อนำมาใช้กับจาวาสคริป ซึ่งคุณได้เห็นตัวอย่างมาหลายบทเรียนแล้วครับ ให้มองส่วนต่างๆของฟอร์ม และจาวาสคริป ค้นหาว่า มีจุดใดจุดหนึ่งเชื่อมต่อกับจุดอื่นๆ... ถึงตอนนี้ ..น่าจะเริ่มเข้าใจแล้วนะครับ
แบบฝึกหัด
ก่อนอื่นให้คุณจัดการให้สคริปตัวอย่างนี้ทำงานได้ในเครื่องของคุณก่อน สคริปตัวอย่างมีจุดอ่อนอย่างหนึ่งคือ... ผู้ใช้สามารถพิมพ์ตัวเลขลงไปในช่องใส่ชื่อได้ เราจะให้คุณแก้ไขจุดอ่อนนี้ ซึ่งเมื่อผู้ใช้พิมพ์ตัวเลขลงไปในช่องใส่ชื่อ แล้วกดปุ่ม กล่องข้อความเตือน(alert) จะขึ้นว่า "ช่องนี้ให้ใส่ตัวแต่อักษรเท่านั้น" แล้วให้ขีดกระพริบขึ้นมาในช่องนี้อีกครั้ง ส่วนหมายเลขบัตรฯ ให้คุณเปลี่ยนเป็นหมายเลขโทรศัพท์ โดยแบ่งเป็น 2 กล่อง โดยมีรูปแบบดังนี้
ให้คุณเขียนโปรแกรมซึ่งตรวจสอบว่า ผู้ใช้พิมพ์ตัวเลขลงไปในแต่ละกล่องครบ 4 หลักหรือไม่ ถ้าไม่เมื่อผู้ใช้คลิ๊กปุ่ม กล่องข้อความเตือนจะขึ้นว่า "โปรดพิมพ์หมายเลขโทรศัพท์ของคุณให้ถูกต้อง" เงื่อนไข "และ" ในจาวาสคริปใช้ว่า "&&" ยกตัวอย่างเช่น if(len == 4 && len2 == 4 ){alert("กขค")} ซึ่งหมายความว่า ถ้า len มีค่าเท่ากับ 4 และ len2 มีค่าเท่ากับ 4 กล่องเตือนจะขึ้นว่า "กขค" หาก len เท่ากับ 4 แต่ len2 ไม่เท่ากับ 4 เงื่อนไขก็จะไม่เป็นจริง กล่องเตือนก็จะไม่ขึ้นครับ แต่ผมไม่แนะนำให้ใช้ "และ" กับแบบฝึกหัดนี้ครับ เงื่อนไข "หรือ" ในจาวาสคริปใช้ว่า "||" (พิมพ์ได้โดยกด Shift ค้าง แล้วกดปุ่มที่อยู่ถัดจากปุ่ม Backspace ลงมาด้านล่าง) ยกตัวอย่างเช่น if(digits.indexOf(num.charAt(i))<0 || digits.indexOf(num2.charAt(i))<0) alert("abc") ซึ่งหมายความว่า ถ้า a มีค่าเท่ากับ 1 หรือ b มีค่าเท่ากับ 2 a จะมีค่าเท่ากับ 0 หาก b เท่ากับ 2 แต่ a ไม่เท่ากับ 1 เงื่อนไขก็ยังคงเป็นจริงและทำให้ a = 0 ข้อแนะนำ : คุณไม่จำเป็นต้องส่งค่าเข้าไปในวงเล็บของชุดคำสั่ง เนื่องจากจะทำให้คุณงงได้ ผมแนะนำให้คุณใช้การเขียนตามลำดับชั้นของตัวถูกกระทำไล่จากใหญ่มาเล็ก จะดูง่ายกว่าครับ
เฉลย
<HTML><HEAD><SCRIPT language="javascript"> function validfn(fnm) {fnlen=fnm.length if (fnlen == 0) {alert("โปรดกรอกชื่อของคุณก่อนครับ") document.dataentry.fn.focus()}} function validnum(num) {len=num.length len2 = document.dataentry.num2.value.length digits="0123456789" if(len != 4 || len2 != 4) {alert("หมายเลขโทรศัพท์ไม่ครบ 4 หลักในแต่ละช่อง... โปรดกรอกใหม่ครับ") document.dataentry.num.focus()} for(i=0; i<4; i++) {if(digits.indexOf(document.dataentry.num.value.charAt(i))<0 || digits.indexOf(document.dataentry.num2.value.charAt(i))<0) {alert("โปรดพิมพ์หมายเลขโทรศัพท์ด้วยตัวเลขทั้งหมดครับ") document.dataentry.num.focus() break}} for(z=0; z<50; z++) {if(digits.indexOf(document.dataentry.fn.value.charAt(z))>0) {alert("โปรดพิมพ์ชื่อด้วยตัวอักษรทั้งหมดครับ") document.dataentry.fn.focus() break}} } </script> </head><body> <form name="dataentry"><center> <h2>การตรวจสอบข้อมูลในแบบฟอร์ม</h2> โปรดกรอกชื่อของคุณ <INPUT TYPE="text" NAME="fn" onBlur="validfn(fn.value)"> <script language="javascript"> document.dataentry.fn.focus() </script> <p>โปรดกรอกหมายเลขโทรศัพท์ของคุณ 0 - <INPUT TYPE="text" NAME="num" SIZE=4> - <INPUT TYPE="text" NAME="num2" SIZE=4> <P><INPUT TYPE="button" VALUE="กดที่นี่เพื่อส่งข้อมูล" onClick="validnum(num.value)"> <br></CENTER></form></BODY></HTML>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น