5. สร้างหน้าข้อความ ---- ควบคุมการตรวจสอบความถูกต้องของข้อมูลและเพิ่มข้อมูล
บทนำที่เกี่ยวข้อง:
จำเป็นต้องมีความถูกต้องของข้อมูลสำหรับเว็บไซต์ เพื่อให้ตรวจสอบได้ง่ายขึ้นว่าข้อมูลที่ผู้ใช้ป้อนนั้นถูกต้องหรือไม่ ASP.NET จึงจัดเตรียมการควบคุมการตรวจสอบความถูกต้องของข้อมูลให้กับโปรแกรมเมอร์ การควบคุมการตรวจสอบข้อมูลที่จัดทำโดย ASP.NET ประกอบด้วย (หมายเหตุ: เพื่อที่จะแสดงรหัส รหัสต่อไปนี้ทั้งหมดจะต้องมีช่องว่างหลัง "<" และก่อนหน้า ">" ขออภัยในความไม่สะดวก!):
ฟังก์ชัน | ควบคุม |
RequiredFieldValidator | ตรวจสอบว่ามีการป้อนข้อมูลในช่องป้อนข้อมูลหรือไม่ |
RangeValidator |
ตรวจ | สอบว่าข้อมูลที่ป้อนในช่องป้อนข้อมูลอยู่ในช่วงที่ระบุหรือไม่ |
ทดสอบว่าฟิลด์อินพุตมีค่าเท่ากับ ไม่เท่ากับ มากกว่า ไม่น้อยกว่า หรือน้อยกว่า |
ValidationSummary | แสดงรายการตัวควบคุมทั้งหมดที่ล้มเหลวในการทดสอบ |
เครื่องมือตรวจสอบนิพจน์ปกติ | ตรวจสอบว่าคอลัมน์สอดคล้องกับกฎ |
การตรวจสอบความถูกต้อง | ที่กำหนดเองของนิพจน์ทั่วไป CustomValidator หรือไม่ |
ขั้นตอนที่ 1 หน้าการออกแบบ <BR>เราใช้ตารางเพื่อออกแบบกรอบงานคร่าวๆ ก่อน เนื่องจากตาราง COMMENTS ในฐานข้อมูลประกอบด้วย
[ภาพที่ 5-1 กรอบฐานข้อมูล]
COMMENT_ID (หมายเลขอัตโนมัติ), FIRST_NAME (ข้อความ), LAST_NAME (ข้อความ), TELEPHONE (ข้อความ), EMAIL (ข้อความ), SUBMIT_DATE (วันที่/เวลา), COMMENTS (บันทึกย่อ), ANSWERED (ค่าบูลีน) และฟิลด์อื่นๆ ตามความต้องการ เราได้ออกแบบเพจดังที่แสดงด้านล่างในไซต์ชื่อ reg.aspx
[ภาพที่ 5-2 หน้าแรก]
ในจำนวนนั้น ACCESS สามารถเพิ่ม COMMENT_ID ได้โดยอัตโนมัติ และผู้ใช้ไม่จำเป็นต้องเพิ่ม ANSWERED ค่าเริ่มต้นของ SUBMIT_DATE ถูกกำหนดเป็น Now() และ ACCESS จะเขียนวันที่ของบันทึกที่เพิ่มโดยอัตโนมัติ
ในหน้า ASP ก่อนหน้าเราก็ผ่านได้
เพื่อตั้งค่าช่องป้อนข้อมูลเพื่อป้อนข้อมูล ASP.NET มีตัวควบคุมกล่องข้อความเพื่อรับข้อมูล ไวยากรณ์จะเป็นดังนี้:
< asp:textbox id=”…” runat=”server” แอตทริบิวต์อื่น ๆ/ >
ใน DreamweaverMX คุณสามารถคลิกได้
ปุ่มทางลัดเพื่อเพิ่มการควบคุมกล่องข้อความ ในกล่องโต้ตอบป๊อปอัป ให้ตั้งค่า ID, โหมดข้อความ (ประเภทกล่องโต้ตอบ), เคล็ดลับเครื่องมือ (พร้อมท์เมื่อเมาส์วางอยู่เหนือตัวควบคุม), เค้าโครง (การออกแบบสไตล์) และข้อมูลสไตล์ (ใช้เพื่อตั้งค่าอินพุต รูปแบบข้อความและเส้นขอบกล่องข้อความ) เพื่อตั้งค่าการควบคุม ภาพด้านล่างคือกล่องโต้ตอบการตั้งค่าของกล่องข้อความ
[รูปที่ 5-3 กล่องโต้ตอบการตั้งค่ากล่องข้อความที่ 1]
[รูปที่ 5-4 กล่องโต้ตอบการตั้งค่ากล่องข้อความที่ 2]
[รูปที่ 5-5 กล่องโต้ตอบการตั้งค่ากล่องข้อความที่ 3]
เนื่องจากรายการข้อมูล COMMENT กำหนดให้ป้อนข้อความจำนวนมาก จึงจำเป็นต้องใช้กล่องข้อความที่มีบรรทัดอินพุตหลายบรรทัด เพียงตั้งค่าโหมดข้อความเป็น MultiLine แล้วป้อนจำนวนแถวที่ต้องการ (แถว)
ในการสร้างเหตุการณ์ที่เพิ่มเข้ามา จำเป็นต้องมีปุ่มด้วย คลิกแท็บแบบฟอร์มแล้วคลิกปุ่ม "ปุ่ม" เพื่อเพิ่ม
การใช้การตรวจสอบข้อมูล STEP2
เนื่องจากต้องป้อน First_name, Last_name, โทรศัพท์ และอีเมล เพื่อป้องกันไม่ให้ผู้ใช้ลืมป้อน คุณสามารถเพิ่มตัวควบคุม RequiredFieldValidator เพื่อตรวจสอบการควบคุมได้ เนื่องจากตัวควบคุมจะแสดงเนื้อหาที่ไม่ผ่านการตรวจสอบ ณ ตำแหน่งของตนในกรณีที่เกิดข้อผิดพลาดในการตรวจสอบความถูกต้อง การควบคุมการตรวจสอบความถูกต้องของข้อมูลจึงควรวางไว้ในตำแหน่งที่เหมาะสม
ไวยากรณ์การควบคุมสำหรับการตรวจสอบข้อมูล RequiredFieldValidator เป็นดังนี้:
< asp:RequiredFieldValidato คุณลักษณะอื่น runat="server">ข้อความแสดงข้อผิดพลาด</ asp:RequiredFieldValidator >
หรือ
< asp:RequiredFieldValidator ErrorMessage = "ข้อความแสดงข้อผิดพลาด" runat คุณลักษณะอื่น ๆ = "เซิร์ฟเวอร์"/ >
หลังจากคลิก แท็กเพิ่มเติม ให้เลือก เซิร์ฟเวอร์การตรวจสอบความถูกต้องของแท็ก ASP.NET และคุณจะเห็นว่ามีตัวควบคุมการตรวจสอบข้อมูลประเภทต่างๆ ให้เลือก เราจำเป็นต้องเพิ่มการควบคุมการตรวจสอบ asp:RequiredFieldValidator ด้านหลังกล่องอินพุต First_name
ในหน้าต่างการตั้งค่าการควบคุม RequiredfieldValidator การควบคุมที่จะตรวจสอบคือ ID ของการควบคุมการป้อนข้อมูลที่เกี่ยวข้องกับการควบคุมการตรวจสอบข้อมูลนี้ และข้อความแสดงข้อผิดพลาดคือข้อความที่แสดงเมื่อการตรวจสอบข้อมูลล้มเหลว ในเวลาเดียวกันเราสามารถเลือกสไตล์ที่ต้องการโดยการตั้งค่าข้อมูลเลย์เอาต์และสไตล์
[รูปที่ 5-6 การเลือกการควบคุมการตรวจสอบ]
[รูปที่ 5-7 กล่องโต้ตอบการตั้งค่าการควบคุม RequiredfieldValidator]
ในเวลาเดียวกัน เพิ่มตัวควบคุมการตรวจสอบข้อมูล RequiredFieldValidato อื่นโดยใช้วิธีการเดียวกันด้านหลังกล่องป้อนข้อมูล Last_Name ตอนนี้เราสามารถบันทึกและดูตัวอย่างเพจได้แล้ว เมื่อไม่มีการป้อนข้อมูลในช่องป้อนข้อมูล First_name และ Last_name และคลิกปุ่มส่ง ข้อความยืนยันความล้มเหลวจะปรากฏขึ้น ดังแสดงในรูปที่ 5-8
แต่หลายครั้งเราต้องตรวจสอบข้อมูลที่ถูกต้อง เช่น รหัสไปรษณีย์ต้องเป็น 6 หลัก และที่อยู่อีเมลที่ป้อนต้องอยู่ในรูปแบบเฉพาะ ที่นี่คุณต้องใช้ RegularExpressionValidator เพื่อตรวจสอบความถูกต้องของข้อมูล ในหน้าการลงทะเบียนนี้ ทั้งโทรศัพท์และอีเมลสามารถใช้การควบคุมนี้ในการตรวจสอบได้
[รูปที่ 5-8 กล่องโต้ตอบ RequiredfieldValidator]
[ภาพที่ 5-9 คุณสมบัติการตั้งค่าอีเมล์]
คล้ายกับวิธีการเพิ่มการควบคุมการตรวจสอบความถูกต้อง RequiredfieldValidator ให้คลิก "แท็กเพิ่มเติม..." เพื่อเลือกเพิ่มการควบคุมการตรวจสอบความถูกต้องของข้อมูล ความแตกต่างคือการตั้งค่า Validation Expression เนื่องจากโทรศัพท์ต้องป้อนตัวเลข 7-10 หลักจึงต้องตั้งค่าดังนี้:
[0-9]{7,10}
ไวยากรณ์ของมันมีดังนี้:
[]: ใช้เพื่อกำหนดอักขระที่ยอมรับได้ เช่น az หมายความว่าตัวพิมพ์เล็ก 'a'-'z' เป็นอักขระที่ยอมรับได้ a-zA-Z หมายความว่าตัวอักษรทั้งหมดเป็นที่ยอมรับ และ 0-9 หมายความว่าตัวอักษรทั้งหมดเป็นที่ยอมรับ ตัวเลข.
{}: ใช้เพื่อกำหนดจำนวนอักขระที่ต้องป้อน {7,10} หมายความว่าสามารถป้อนอักขระได้ 7-10 ตัว {0,} หมายความว่าสามารถยอมรับอักขระได้ไม่จำกัดจำนวน 0 ตัว
'.': ระบุการป้อนอักขระใดๆ .{0,} หมายความว่ายอมรับอักขระจำนวนเท่าใดก็ได้เป็น 0 อนันต์
|: หมายถึง OR (หรือ) เช่น [A-Za-z]{3}|[0-9]{3} หมายความว่ายอมรับตัวอักษรภาษาอังกฤษ 3 ตัวหรือตัวเลข 3 ตัว
(): เพื่อความสะดวกในการอ่าน สตริงที่มีสัญลักษณ์ | มักจะอยู่ใน () ตัวอย่างเช่น ([A-Za-z]{3}|[0-9]{3})
: หากมีสัญลักษณ์พิเศษ เช่น [], {}, (), | ฯลฯ ต้องเพิ่ม .
ต่อไปนี้คือตัวอย่างบางส่วนที่ใช้กันทั่วไป:
อีเมล: .{1,}@.{1,}/..{1}
โทรศัพท์ (รวมถึงรหัสพื้นที่): ([0-9]{3,4}))[0-9]{7,8}
แม้ว่าจะไม่มีการรับประกันว่าอินพุตของผู้ใช้เป็นข้อมูลจริง แต่การควบคุมการตรวจสอบสามารถรับประกันได้ว่ารูปแบบนั้นถูกต้อง
[ภาพที่ 5-10 หน้าตัวอย่าง]
สำหรับตัวควบคุม CompareValidator คุณสมบัติจะถูกตั้งค่าดังนี้:
การควบคุมเพื่อเปรียบเทียบ | จะตั้งค่าการควบคุมที่ถูกเปรียบเทียบกับ |
การควบคุมไปจนถึงการตรวจสอบ | จะเป็นการตั้งค่าการควบคุมที่เกี่ยวข้องกัน |
ค่าที่จะเปรียบเทียบ | ตั้งค่าค่าที่เปรียบเทียบ |
ผู้ดำเนินการ | จะตั้งค่าความสัมพันธ์ในการเปรียบเทียบ ( เท่ากับ, ไม่เท่ากับ, มากกว่า, มากกว่าหรือเท่ากับ, น้อยกว่า, น้อยกว่าหรือเท่ากับ ) |
ประเภท | ข้อมูลการเปรียบเทียบ |
ข้อความแสดงข้อผิดพลาด | แสดงข้อมูล |
[รูปที่ 5-11 กล่องโต้ตอบการตั้งค่า CompareValidator]
วิธีการตั้งค่าของ CustomValitor นั้นคล้ายกับการควบคุมอื่นๆ แต่ต้องใช้ฟังก์ชัน OnServerValidate ที่เขียนด้วยลายมือ (ในเหตุการณ์) เพื่อตรวจสอบข้อมูล
[รูปที่ 5-12 กล่องโต้ตอบการตั้งค่า CustomValitor]
ตัวอย่างเช่น
< asp:CustomValidator id="CusValid" runat="server" ControlToValidate=ชื่อตัวควบคุม OnServerValidate="TheFunction" >ข้อความแสดงข้อผิดพลาด</ asp:CustomValidator >
<ภาษาสคริปต์ =”vb” runat=”เซิร์ฟเวอร์” >
ฟังก์ชัน TheFunction(ผู้ส่งเป็นวัตถุ ค่าเป็นสตริง) เป็นบูลีน
-
กลับ…
สิ้นสุดฟังก์ชัน
</ /สคริปต์ >
ตัวควบคุมนี้จะเรียกใช้ฟังก์ชัน TheFuncion ถ้าคืนค่า false จะมีการรายงานข้อความแสดงข้อผิดพลาด
การควบคุม RangeValidator
[รูปที่ 5-12 กล่องโต้ตอบการตั้งค่า RangeValidatorr]
คุณสามารถกำหนดช่วงค่าผ่านค่าขั้นต่ำและค่าสูงสุดได้ ในเวลาเดียวกัน คุณสามารถตั้งค่าประเภทการเปรียบเทียบผ่านประเภท เช่น "string", "Integer" เป็นต้น การตั้งค่าอื่นๆ จะคล้ายกับการตั้งค่าสำหรับส่วนประกอบอื่นๆ
นอกจากนี้ยังมีองค์ประกอบ: ValidationSummary ในหมู่พวกเขา HeaderText ตั้งค่าข้อความส่วนหัวและ DisplayMode ตั้งค่าโหมดการแสดงผลมีดังนี้:
ค่าแอตทริบิวต์ | หมายถึง |
รายการ BulletList SingleParagraph | ErrorMessage จะแสดงเป็นบรรทัดแยกกัน ErrorMessage จะแสดงเป็นบรรทัดแยกกัน ErrorMessage จะแสดงอยู่ในบรรทัดเดียวกัน |
[รูปที่ 5-13 กล่องโต้ตอบการตั้งค่าคุณสมบัติ ValidationSummary]
สิ่งที่แนบมาคือซอร์สโค้ดของกลุ่มโปรแกรมหลัก:
< ความกว้างของตาราง = "75%" ความสูง = "594" border = "1" cellpadding = "1" cellspacing = "0" bordercolor = "#999999" >
<tr>
< td width="22%" height="22">ชื่อ< /td >
< td width="38%" >< asp:textbox BackColor="#CCCCCC" ForeColor="#0033FF" ID="first" runat="server" TextMode="SingleLine" ToolTip="กรุณาป้อนชื่อ" MaxLength ="40" BorderWidth="1" width="200"/ >< /td >
< td width="40%" >< asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate = "first" ErrorMessage = "RequiredField" ForeColor = "#FF0000" ID = "validname" runat = "เซิร์ฟเวอร์" / > < /td >
</ /tr >
<tr>
< td height="22">นามสกุล</ /td >
< td >< asp:textbox BackColor="#CCCCCC" ForeColor="#0033FF" ID="Lastname" runat="server" TextMode="SingleLine" width="200" ToolTip="กรุณากรอกนามสกุล" BorderWidth= "1"/ >< /td >
< td >< asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate = "นามสกุล" ErrorMessage = "RequiredField" ForeColor = "#FF0000" ID = "vailLast" runat = "เซิร์ฟเวอร์" / > </ /td >
</ /tr >
<tr>
< td height="22">โทรศัพท์</td >
< td >< asp:textbox BackColor="#CCCCCC" BorderWidth="1" ForeColor="#0066FF" ID="โทรศัพท์" runat="server" TextMode="SingleLine" ToolTip="กรุณาป้อนโทรศัพท์ของคุณ" Wide=" 200" / >< /td >
< td > < asp:regularexpressionvalidator BackColor="#CCCCCC" ControlToValidate="telephone" ErrorMessage="ต้องใช้หมายเลข 7-10 หมายเลข" ForeColor="#FF0000" ID="vailtel" runat="server" ValidationExpression="[0-9 ]{7,10}" / > < asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate="โทรศัพท์" ErrorMessage="RequiredField" ForeColor="#FF0000" ID="vailtel2" runat="เซิร์ฟเวอร์" / >< /td >
</ /tr >
<tr>
< td height="22">อีเมล</ /td >
< td >< asp:textbox BackColor="#CCCCCC" BorderWidth="1" ForeColor="#0033FF" ID="email" runat="server" TextMode="SingleLine" ToolTip="Please enter your E-mail" width ="200"/ >< /td >
< td >< asp:regularexpressionvalidator BackColor="#CCCCCC" ControlToValidate="email" ErrorMessage="ทำให้ที่อยู่อีเมลไม่ถูกต้อง" ForeColor="#FF0000" ID="valiemail" runat="server" ValidationExpression=".{1,}@ .{3,}" / > < asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate="email" ErrorMessage="Required Field" ForeColor="#FF0000" ID="valiemail2" runat="server" / > < /td >
</ /tr >
<tr>
< td height="22" colspan="3" >< div align="center" >ความคิดเห็น< /div >< /td >
</ /tr >
<tr>
< td height="188" colspan="3" >< div align="center" >
< asp:textbox BackColor="#CCCCCC" BorderWidth="1" ForeColor="#0033FF" ID="Comments" Rows="16" runat="server" TextMode="MultiLine" ToolTip="กรุณาป้อนความคิดเห็น" ความกว้าง ="400"/ >
</ /div >
< div align="center"> < br >
</div >< /td >
</ /tr >
<tr>
< td height="71" colspan="3" >< div align="center" >
< asp:validationsummary BackColor="#CCCCCC" DisplayMode="BulletList" ForeColor="#FF0000" HeaderText="ประกอบด้วยเนื้อหาที่ไม่ถูกต้อง:" ID="valSum" runat="server" ToolTip="Error" / >
</div >< /td >
</ /tr >
<tr>
< td height="22" colspan="3" >< ประเภทอินพุต = "ส่ง" ชื่อ = "ส่ง" ค่า = "ส่ง" >
</ /td >
</ /tr >
</ /ตาราง >
สไตล์มีดังนี้:
[ภาพที่ 5-14 ดูตัวอย่าง]
ขั้นตอนที่ 3 การเพิ่มข้อมูล
ส่วนฟังก์ชั่นการเพิ่มข้อมูลนั้นค่อนข้างง่าย เราสามารถตั้งค่าฟังก์ชั่นการเพิ่มข้อมูลผ่านตัวช่วยสร้างและให้ DreamweaverMX เพิ่มโค้ดโดยอัตโนมัติ คลิกที่แท็บ Server Behaviors ใน Application จากนั้นคลิกปุ่ม + เพื่อเลือก Insert Record (ภาพที่ 5-15)
ในกล่องโต้ตอบป็อปอัพ คุณต้องกำหนดแหล่งข้อมูลที่เชื่อมต่อก่อน หากไม่พบในรายการ คุณสามารถคลิกปุ่ม Define เพื่อตั้งค่าแหล่งข้อมูล (ภาพที่ 5-16) แทรกลงในตารางใช้เพื่อตั้งค่าตารางที่ต้องการเพิ่มข้อมูล ในคอลัมน์ กล่องข้อความสามารถจับคู่กับแหล่งข้อมูลที่เกี่ยวข้องและสามารถตั้งค่าประเภทข้อมูลได้ เมื่อสำเร็จ Go To จะตั้งค่าเพจให้ข้ามไปหากเพิ่มข้อมูลสำเร็จ เมื่อล้มเหลว Go To สามารถตั้งค่าเพจให้ข้ามไปหากการเพิ่มข้อมูลล้มเหลว ขณะเดียวกัน เรายังสามารถเลือกแสดงข้อมูลการแก้ไขจุดบกพร่องเมื่อล้มเหลวเพื่อตั้งค่าข้อความแสดงข้อผิดพลาดที่จะแสดงเมื่อการเพิ่มข้อมูลล้มเหลว
[ภาพที่ 5-15 เลือกแทรกบันทึก]
[รูปที่ 5-16 การตั้งค่าการเพิ่มข้อมูล]
ลองดูโค้ดที่เพิ่ม:
<MM:แทรก
runat = "เซิร์ฟเวอร์"
CommandText='< %# "INSERT INTO COMMENTS (ความคิดเห็น, อีเมล, FIRST_NAME, LAST_NAME, โทรศัพท์) ค่า (?, ?, ?, ?, ?)" % >'
ConnectionString='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_STRING_location") % >'
DatabaseType='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_DATABASETYPE_location") % >'
Expression='< %# Request.Form("MM_insert") = "form1" % >'
CreateDataSet = "เท็จ"
SuccessURL='< % # "index.htm" % >'
FailureURL='< % # "reg.aspx" % >'
ตรวจแก้จุดบกพร่อง = "จริง"
-
<พารามิเตอร์>
< ชื่อพารามิเตอร์ = "@COMMENTS" Value='< %# IIf((Request.Form("Comments") < > Nothing), Request.Form("Comments"), "") % >' Type="WChar" />
< ชื่อพารามิเตอร์ = "@EMAIL" Value='< %# IIf((Request.Form("email") < > Nothing), Request.Form("email"), "") % >' Type="WChar" />
< ชื่อพารามิเตอร์ = "@FIRST_NAME" Value='< %# IIf((Request.Form("first") < > Nothing), Request.Form("first"), "") % >' Type="WChar" />
< ชื่อพารามิเตอร์ = "@LAST_NAME" Value='< %# IIf((Request.Form("Lastname") < > Nothing), Request.Form("Lastname"), "") % >' Type="WChar" />
< ชื่อพารามิเตอร์ = "@TELEPHONE" Value='< %# IIf((Request.Form("telephone") < > Nothing), Request.Form("telephone"), "") % >' Type="WChar" />
</ /พารามิเตอร์ >
</MM:แทรก>
MM: ส่วนแทรกคือป้ายกำกับที่ใช้โดย Dreamweaver เพื่อเพิ่มฐานข้อมูล และพารามิเตอร์คือค่าที่ใช้ระบุพารามิเตอร์
รหัสก่อนหน้านี้ใช้เพื่อระบุลิงค์ฐานข้อมูลและเพจที่จะข้ามไปหลังจากการบวกสำเร็จ หากการเพิ่มล้มเหลว ข้อความแสดงข้อผิดพลาดจะปรากฏขึ้น เช่นเดียวกับตารางที่เกี่ยวข้อง
สิ่งเหล่านี้ได้รับการพัฒนาโดย MacroMedia เอง และต้องการการสนับสนุนจากส่วนประกอบบางส่วนของ Macromedia ซึ่งแตกต่างจากรูปแบบโค้ดมาตรฐานของ ASP.net จำนวนมากบนอินเทอร์เน็ตในปัจจุบัน โปรดอย่าเข้าใจผิดเกี่ยวกับรูปแบบโค้ดมาตรฐานของ ASP.net โดยใช้โค้ดนี้เมื่ออ้างอิงถึงโค้ด คุณสามารถดู www.gotdotnet.com สำหรับรูปแบบโค้ดมาตรฐาน หากคุณต้องการเขียนโค้ดมาตรฐานคุณสามารถใช้ WebMatrix ที่อยู่ดาวน์โหลด: http://www.asp.net/webmatrix/download.aspx?tabindex=4
