การตรวจสอบความถูกต้องของข้อมูล (Data Validation) ภาควิชาคอมพิวเตอร์ธุรกิจ 1

วัตถุประสงค์ เพื่อให้นักศึกษาทราบถึงรูปแบบการตรวจสอบความถูกต้องของข้อมูล เพื่อให้นักศึกษารู้จักคอนโทรลและคุณสมบัติที่เกี่ยวข้องกับการตรวจสอบความถูกต้องของข้อมูล ยกตัวอย่างการสร้างแอฟฟลิเคชั่นโดยที่มีการตรวจสอบความถูกต้องของข้อมูล

การตรวจสอบความถูกต้องของข้อมูล การตรวจสอบความถูกต้องของข้อมูล เป็นขบวนการหนึ่งที่จะลดความผิดพลาดที่อาจเกิดขึ้นกับระบบงาน โดยผู้พัฒนาโปรแกรมสามารถกำหนดคุณสมบัติบางประการเพิ่มเติมที่คอนโทรลโดยตรง หรือสร้าง validation control ขึ้นมาตรวจสอบก็ได้ Input Validation Control - RequiredFieldValidator - Compare Validator - RangeValidator - RegularExpressionValidator - CustomValidator - ValidationSummary คอนโทรลกลุ่มนี้มีอยู่ใน Toolbox กลุ่ม Validation

สร้างหน้าเว็บสำหรับตรวจสอบข้อมูลโดยให้กรอกข้อมูลดังนี้ txtName txtLastname txtNickname txtSex txtAge txtEmail txtNum1 txtNum2

การใช้งาน Input Validation Control RequiredFieldValidator เป็นคอนโทรลที่ใช้ตรวจสอบว่าผู้ใช้ป้อนข้อมูลในคอนโทรล เช่น textbox ที่ระบุหรือไม่ ถ้ายังไม่ป้อนจะสร้างข้อความแจ้งให้ผู้ใช้ทราบ ดังนั้นต้องระบุที่ RequiredFieldValidator ด้วยว่าจะให้ตรวจสอบ textbox ใด และให้หากไม่ป้อนข้อมูลจะให้แสดงข้อความอย่างไร ตัวอย่างการจะกำหนดให้ textbox ชื่อนักศึกษาต้องป้อนข้อมูล ทำดังนี้ 1. คลิกที่ Toolbar เพื่อเลือกกลุ่ม Validation 2. เลือก RequiredFieldValidator 3. ลาก RequiredFieldValidator ไปไว้ในตำแหน่งทีต้องการ 4. กำหนดคุณสมบัติ ControlToValidate เป็น textbox ตัวที่ต้องการตรวจสอบ 5. กำหนดคุณสมบัติ ErrorMessage เป็น ยังไม่ได้ป้อนข้อมูล 6. กำหนดคุณสมบัติ Text เป็น กรุณาป้อนข้อมูลให้ครบถ้วน ดังภาพ

การใช้งาน Input Validation Control (ต่อ) 3 1 2 ภาพผลลัพธ์ 4 5 6

การใช้งาน Input Validation Control (ต่อ) CompareValidator เป็นคอนโทรลที่ใช้เปรียบเทียบข้อมูล ทำได้หลายลักษณะ คือ - เปรียบค่าข้อมูลในฟิลด์หนึ่งเท่ากับข้อมูลในอีกฟิลด์หนึ่ง ภาพผลลัพธ์

การใช้งาน Input Validation Control (ต่อ) เปรียบค่าข้อมูลในฟิลด์หนึ่งกับค่าคงที่ ซึ่งสามารถเปรียบ > , >=, <, <=, =,<> ก็ได้ เปรียบค่าประเภทข้อมูลในฟิลด์หนึ่ง ภาพผลลัพธ์

การใช้งาน Input Validation Control(ต่อ) RangeValidator คอนโทรลนี้ใช้ตรวจสอบว่าข้อมูลที่ผู้ใช้ป้อนอยู่ภายในขอบเขตที่กำหนดหรือไม่ ภาพผลลัพธ์

การใช้งาน Input Validation Control(ต่อ) RegularExpressionValidator คอนโทรลนี้ใช้ตรวจสอบว่าข้อมูลที่ผู้ใช้ป้อนนั้นสอดคล้องกับรูปแบบ ที่กำหนดหรือไม่ ภาพผลลัพธ์ 2 1 3

การใช้งาน Input Validation Control(ต่อ) CustomValidator คอนโทรลนี้ใช้ในการตรวจสอบว่าผู้ใช้กรอกข้อมูลมาถูกต้องตามเงื่อนไขที่เรากำหนดขึ้นมาเองหรือไม่ <asp:CustomValidator id=“ชื่ออ้างอิง” ControlToValidate=“ชื่อControl” ClientValidationFunction=“ชื่อฟังก์ชั่นหรือโพรซีเยอร์" OnServerValidate=“ชื่อฟังก์ชั่นหรือโพรซีเยอร์" ErrorMessage=“ข้อความที่จะแสดงใน ValidationSummary“ Text=“ข้อความที่จะแสดง” ForeColor=“สีตัวอักษร“ Backcolor=“สีพื้น” </asp:CustomValidator>

การใช้งาน Input Validation Control(ต่อ) ตัวอย่าง id : text1 สร้าง CustomValidator - ControlTovalidate : text1 - Text : “กรุณากรอกเป็นเลขคู่เท่านั้น - ErrorMessage : “กรอกข้อมูลไม่ถูกต้อง”

การใช้งาน Input Validation Control(ต่อ) ตัวอย่าง Protected Sub CustomValidator1_ServerValidate(ByVal source As Object, ByVal args As System.Web.UI.WebControls.ServerValidateEventArgs) Handles CustomValidator1.ServerValidate If ((Text1.Text Mod 2) = 0) Then args.IsValid = True Else args.IsValid = False End If End Sub

การใช้งาน Input Validation Control(ต่อ) นอกจากนี้ ยังมี ValidationSummary เป็นคอนโทรลที่ใช้ในการสรุปผลข้อผิดพลาดจากการตรวจสอบภายในเว็บเพจหน้านั้น ใช้ในกรณีที่มีการตรวจสอบความถูกต้องหลายอย่าง ตัวอย่างเช่น ตัวอย่าง การออกแบบหน้าจอซึ่งประกอบด้วย ชื่อ อายุ เงินเดือน และโทรศัพท์ของพนักงานและตรวจสอบว่าข้อมูลตามเงื่อนไข ดังนี้ - ชื่อ ต้องกรอก - อายุ ต้องไม่ต่ำกว่า 20 ปี และต้องเป็นตัวเลข - เงินเดือน ต้องอยู่ระหว่าง 10,000 – 100,000 บาท - โทรศัพท์ เป็นตามรูปแบบโทรศัพท์สากล เมื่อคลิกปุ่มยืนยันให้แสดงสรุปข้อผิดพลาดทั้งหมด

การใช้งาน Input Validation Control(ต่อ) ID : txtName ID : txtAge ID : txtSalary ID : txtTelphone ID : btnSubmit Text : ยืนยัน

การใช้งาน Input Validation Control(ต่อ) 1. สร้าง RequiredFieldValidator - ControlTovalidate : txtName - ErrorMessage : “ไม่ได้ป้อนชื่อพนักงาน” - Text : “กรุณาป้อนชื่อ” 2. สร้าง Compare Validator1 - ControlTovalidate : txtAge - ErrorMessage : “ช่วงอายุไม่ถูกต้อง” - Text : “อายุไม่ต่ำกว่า 20 ปี” - Operator : Greater Than Equal - ValueToCompare : 20 สร้าง Compare Validator2 - ControlTovalidate : txtAge - ErrorMessage : “ข้อมูลประเภทอายุไม่ถูกต้อง” - Text : “ข้อมูลอายุต้องเป็นตัวเลข” - Operator : Data Type Check - Type : integer

การใช้งาน Input Validation Control(ต่อ) 3. สร้าง RangeValidator - ControlTovalidate : txtSalary - ErrorMessage : “ข้อมูลเงินเดือนไม่ถูกต้อง” - Text : “เงินเดือนระหว่าง 10,000 – 100,000 บาท” - MaximumValue : 100000 - MinimumValue : 10000 4. สร้าง RegularExpressionValidator - ControlTovalidate : txtTelephone - ErrorMessage : “รูปแบบโทรศัพท์ไม่ถูกต้อง” - Text : “รูปแบบโทรศัพท์ คือ 00-0000-0000” - ValidationExpression : 00-0000-0000 5. สร้าง ValidationSummary

การใช้งาน Input Validation Control(ต่อ) ภาพผลลัพธ์

HW3 ให้ออกแบบหน้าจอและกำหนดคุณสมบัติเพื่อให้แสดงผล ดังนี้