Bài giảng Validation Control - Nguyễn Hà Giang

pptx 39 trang huongle 2760
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Validation Control - Nguyễn Hà Giang", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pptxbai_giang_validation_control_nguyen_ha_giang.pptx

Nội dung text: Bài giảng Validation Control - Nguyễn Hà Giang

  1. 1 Validation Control Nguyễn Hà Giang Nguyen Ha Giang
  2. Nội dung 2  Validation control  Chức năng validation cho việc data input  Quá trình validation trên web form  Các validation control ◼ RequiredFieldValidator ◼ CompareValidator ◼ RangeValidator ◼ RegularExpressionValidator ◼ CustomValidator ◼ ValidationSummary Nguyen Ha Giang
  3. Tại sao phải validation? 3  Có rất nhiều lỗi có thể xảy ra trên web form  User có thể bỏ qua thông tin quan trọng (bỏ trống)  User có thể nhập không đúng định dạng ◼ Địa chỉ email, số điện thoại  User có thể nhập ký tự chữ cái trong ô nhập dữ liệu số!  User có thể submit giá trị ngoài miền cho phép Nguyen Ha Giang
  4. Tại sao phải validation? 4  Web App gặp phải một số khó khăn khi validation, do dựa trên các HTML input control cơ bản.  Không có đặc tính tương đồng với Windows App  Kỹ thuật chung của Windows App là xử lý sự kiện KeyPress của TextBox để kiểm tra việc chỉ nhập ký tự số  Điều này không thể trong Web app, do việc post back server thì chậm!  Thậm chí nếu sử dụng client- side JavaScript, user cũng có thể né trách việc kiểm tra và post giá trị không hợp lệ! Nguyen Ha Giang
  5. Validation control 5  Client side validation User nhập  Phụ thuộc vào browser liệu Thông điệp  Phản hồi nhanh lỗi  Giảm việc post back Valid? No  Server side validation Client Yes  Thực thi kể cả client side đã Server validation Valid? No  Có thể check nâng cao Yes ◼ Sử dụng .NET class ◼ Database Web App xử lý Nguyen Ha Giang
  6. Validation control 6  Cung cấp các chức năng đảm bảo việc nhập liệu từ user luôn phù hợp yêu cầu của app! Never trust user input! Nguyen Ha Giang
  7. Validation control 7  RequiredFieldValidator: xác nhận thành công khi nhập liệu không phải chuỗi rỗng  RangeValidator: Xác nhận thành công khi nhập liệu nằm trong miền xác định.  CompareValidator: Xác nhận thành công khi dữ liệu có giá trị phù hợp với giá trị khác hoặc giá trị của control khác.  RegularExpressionValidator: Xác nhận thành công khi dữ liệu phù hợp với một định dạng xác định.  CustomValidator: cho phép kiểm tra nâng cao ở server, check dữ liệu trong database  ValidationSummary: hiển thị lỗi hoặc chi tiết các lỗi Nguyen Ha Giang
  8. Validation control 8  Mỗi validation control gắn với 01 input control  Có thể tạo nhiều validation control cho cùng 1 control  Nếu sử dụng RangeValidator, CompareValidator, hoặc RegularExpressionValidator, xác nhận sẽ thành công khi dữ liệu nhập của control là rỗng, do ko có dữ liệu so sánh!  Khắc phục bằng cách thêm RequiredFieldValidator cho control! Nguyen Ha Giang
  9. Quá trình validation 9  Khi sử dụng automatic validation, user sẽ nhận được page bình thường và chuẩn bị nhập liệu  Phụ thuộc vào browser, lỗi có thể xuất hiện ngay khi user điền dữ liệu  Khi chuyển focus, xử lý script phía client! Nguyen Ha Giang
  10. Quá trình validation 10  Khi hoàn thành, user kích vào button để submit page  Mỗi button có thuộc tính CausesValidation có hai giá trị  False: sẽ bỏ qua các validation control, trang web sẽ được post back và code xử lý sự kiện sẽ chạy bình thường  True: ASP.NET sẽ tự động validation các control trong page. Nếu client-side validation được hỗ trợ, nó sẽ ngưng trang web khỏi việc post back ◼ Validation diễn ra tự động khi button với CausesValidation là true được kích hoạt ◼ Validation ko xảy ra khi page được post back do sự kiện change hoặc user kích vào button với CausesValidation là false Nguyen Ha Giang
  11. Quá trình validation 11  Nếu client-side validation không hỗ trợ, trang sẽ được post back và page life cycle được thực hiện!  Khi điều này xảy ra thì phải biết và không thực hiện phần xử lý protected void cmdOK_Click(Object sender, EventArgs e) { // bỏ qua sự kiện khi control không được xác nhận if (!Page.IsValid) return; // phần xử lý bình thường nếu validation thành công! lblMessage.Text = “Trình xử lý sự kiện Click của button thực thi!"; }  Page.IsValid là false nếu có bất cứ VC nào fail  Page.IsValid là true nếu tất cả VC thành công, hoặc validation ko thực thi! Nguyen Ha Giang
  12. Các thuộc tính chung 12 Thuộc tính Ý nghĩa ControlToValidate Tên control cần kiểm tra, phải xác định khi sử dụng VC Text Chuỗi thông báo xuất hiện khi có lỗi ErrorMessage Chuỗi thông báo xuất hiện trong ValidationSummary. Giá trị này sẽ được hiển thị tại vị trí của điều khiển nếu không gán giá trị cho thuộc tính text Display Hình thức hiển thị: -None: không hiển thị thông báo lỗi -Static: trong trường hợp ko vi phạm, điều khiển không xuất hiện nhưng vẫn chiếm vị trí như lúc thiết kế -Dynamic: tương tự như static nhưng không chiếm vị trí EnableClientScript Cho phép kiểm tra ở client hay không, mặc định là có ValidationGroup Thiết lập nhóm validate Nguyen Ha Giang
  13. RequiredFieldValidator 13  Sử dụng để bắt buộc một control nào đó phải được nhập liệu!  Thuộc tính InitialValue: giá trị khởi động. Giá trị nhập phải khác giá trị này, mặc định là rỗng Nguyen Ha Giang
  14. RequiredFieldValidator 14  Minh họa dùng RequiredFieldValidator 1 Chọn control cần kiểm tra dữ liệu 2 Nhập chuỗi hiển thị lỗi Nguyen Ha Giang
  15. RequiredFieldValidator 15  Chạy web form Hiển thị thông báo lỗi khi không nhập liệu cho textbox Nguyen Ha Giang
  16. CompareValidator 16  Dùng để so sánh giá trị của một control với giá trị control khác hoặc một giá trị xác định  Thông qua thuộc tính Operator, ta có thể thực hiện phép so sánh như: =, , =,<= hoặc dùng kiểm tra kiểu dữ liệu (DataTypeCheck)  Thường dùng để kiểm tra ràng buộc miền giá trị, kiểu giá trị, liên thuộc tính  Cẩn thận: trong trường hợp không nhập dữ liệu thì điều khiển sẽ không thực hiện việc kiểm tra! Nguyen Ha Giang
  17. CompareValidator 17  Các thuộc tính  ControlToCompare: tên control cần kiểm tra giá trị  Operator: phép so sánh, kiểm tra dữ liệu ◼ =, >, >=, ◼ DataTypeCheck: kiểm tra kiểu dữ liệu  Type: quy định kiểu dữ liệu để kiểm tra ◼ String, Integer, Double, Date, Currency  ValueToCompare: giá trị cần so sánh Nguyen Ha Giang
  18. CompareValidator 18  Minh họa dùng CompareValidator kiểm tra việc nhập giá trị số Thông báo lỗi Toán tử kiểm tra: kiểm tra kiểu dữ liệu Kiểu số nguyên Nguyen Ha Giang
  19. CompareValidator 19  Chạy web form Nhập 123 Nhập abc Nguyen Ha Giang
  20. RangeValidator 20  Kiểm tra giá trị của điều khiển nằm khoảng từ min max  Dùng để kiểm tra ràng buộc miền giá trị  Nếu ko nhập dữ liệu thì ko thực hiện kiểm tra  Thuộc tính:  MinimumValue: giá trị nhỏ nhất  MaximumValue: giá trị lớn nhất  Type: xác định kiểu để kiểm tra dữ liệu ◼ String, integer, double, date, currency Nguyen Ha Giang
  21. RangeValidator 21  Tạo web form nhập tuổi lao động, hợp lệ từ 18 - 55 Control cần xác nhận dữ liệu Thông điệp lỗi Miền giá trị hợp lệ Nguyen Ha Giang
  22. RangeValidator 22  Chạy web form Nhập 20 Nhập 10 Nguyen Ha Giang
  23. RegularExpressionValidator 23  Kiểm tra giá trị phải theo mẫu quy định trước: địa chỉ email, số điện thoại, mã vùng, số chứng minh  Trong trường hợp không nhập liệu thì không kiểm tra  Thuộc tính  ValidationExpress: mẫu kiểm tra Chuỗi mô tả quy tắc email Nguyen Ha Giang
  24. RegularExpressionValidator 24 Ký hiệu Mô tả A Ký tự chữ cái, đã được xác định, ví dụ: a 1 Ký tự số, đã được xác định, ví dụ: 1 [0-n] Ký tự số từ 0 → 9 [abc] Một ký tự: a hoặc b hoặc c | Lựa chọn mẫu này hoặc mẫu khác \w Ký tự thay thế là chữ cái \d Ký tự thay thế là ký tự số \ Thể hiện ký tự đặc biệt theo sau \. Ký tự thay thế phải là dấu chấm câu ? Quy định số lần xuất hiện: 1 hoặc n lần * Quy định số lần xuất hiện: 0 hoặc n lần + Số lần xuất hiện 1 hoặc nhiều lần {n} Số lần xuất hiện đúng n lần Nguyen Ha Giang
  25. RegularExpressionValidator 25  Tạo form check e-mail Nguyen Ha Giang
  26. RegularExpressionValidator 26  Chạy web form Nhập đúng định Nhập sai quy tắc dạng email Nguyen Ha Giang
  27. CustomValidator 27  Điều khiển này cho phép bạn tự viết hàm xử lý kiểm tra lỗi  Sự kiện: ServerValidate: đặt các hàm kiểm tra dữ liệu trong sự kiện này. Việc kiểm tra thực hiện ở server! Nguyen Ha Giang
  28. CustomValidator 28  Minh họa: web form yêu cầu nhập 1 số, nếu số là lẻ thì ko xác nhận và hiển thị thông báo yêu cầu phải nhập số chẵn. Ngược lại, xử lý điều gì đó (xuất ra thông báo!) Textbox CustomValidation: sẽ thiết kế hàm validation riêng Button sẽ post back server: xử lý khi IsValid = true Nguyen Ha Giang
  29. CustomValidator 29  Khai báo sự kiện ServerValidator cho CustomValidator 1 Chọn tab event 2 Double click vào sự kiện ServerValidate để tạo trình xử lý trên server Nguyen Ha Giang
  30. CustomValidator 30  Trình xử lý ServerValidate trên server protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args) { // xác nhận số nhập vào là số chẵn if ((int.Parse(TextBox1.Text) % 2) == 0) args.IsValid = true; // xác nhận đúng else args.IsValid = false; // chưa xác nhận } Khi hàm trả về, args.IsValid là true thì dữ liệu của control được xác nhận ngược lại chưa xác nhận Nguyen Ha Giang
  31. CustomValidator 31  Xử lý sự kiện click của button check  Không xử lý nếu chưa xác nhận dữ liệu  Xử lý đơn giản: xuất ra thông tin đã nhập số chẵn protected void btnCheck_Click(object sender, EventArgs e) { if ( !IsValid ) // nếu chưa xác nhận trả về => không xử lý return; // nếu xác nhận dữ liệu => thông báo nhập số chẵn Response.Write("Bạn nhập số chẵn"); } Nguyen Ha Giang
  32. CustomValidator 32 Nhập 999 Nhập 900 Kích vào Check! Kích vào Check! Nguyen Ha Giang
  33. ValidationSummary 33  Điều khiển dùng để hiển thị ra bảng lỗi chứa tất cả các lỗi trên trang web.  Nếu điều khiển nào có dữ liệu không hợp lệ, giá trị thuộc tính ErrorMessage của validation control sẽ được hiển thị  Nếu giá trị của thuộc tính ErrorMessage không được xác định, thông báo lỗi sẽ không xuất hiện trong bảng lỗi  Các thuộc tính  HeaderText: dòng tiêu đề thông báo lỗi  ShowMessageBox: quy định thông báo lỗi có được phép hiển thị như cửa sổ MessageBox hay không, mặc định là false  ShowSummary: bảng thông báo được hiển thị hay không, mặc định là true Nguyen Ha Giang
  34. Demo sử dụng validation control 34  Tạo form cho phép user nhập thông tin đăng ký khách hàng.  Giao diện minh họa như hình bên Nguyen Ha Giang
  35. Demo sử dụng validation control 35 Điều khiển Kiểu Thuộc tính Giá trị rfvTenDN RequiredField ControlToValidate txtTenKH ErrorMessage Tên đăng nhập không rỗng rfvMatKhau RequiredField ControlToValidate txtMatKhau ErrorMessage Mật khẩu không được rỗng rfvMauKhauNL RequiredField ControlToValidate txtMauKhauNL ErrorMessage Không được rỗng cvMatKhauNL Compare ControlToValidate txtMauKhauNL ControlToCompare txtMatKhau ErrorMessage Mật khẩu gõ lại không khớp rfvTenKH RequiredField ControlToValidate txtTenKH ErrorMessage Họ tên không rỗng Nguyen Ha Giang
  36. Demo sử dụng validation control 36 Điều khiển Kiểu Thuộc tính Giá trị cvNgaySinh Compare ControlToValidate txtNgaySinh Operator DataTypeCheck ErrorMessage Date revEmail RegularExpression ControlToValidate txtEmail ValidationExpression Internet email ErrorMessage Email không hợp lệ rvThuNhap Range ControlToValidate txtThuNhap MaximumValue 50000000 MinimumValue 1000000 Type Integer ErrorMessage Thu nhập từ 1 – 50 triệu vsDanhSachLoi ValidationSummary HeaderText Danh sách các lỗi ShowMessageBox true Nguyen Ha Giang
  37. Demo sử dụng validation control 37  Chạy web form Nguyen Ha Giang
  38. Demo sử dụng validation control 38  Chạy web form Thông báo danh sách lỗi trong cửa sổ popup Tóm tắt các lỗi Nguyen Ha Giang
  39. Bài tập 39  Một công ty giới thiệu việc làm, cần xây dựng trang web cho phép người dùng đăng ký việc làm trực tuyến. 1. Hãy phác thảo form tuyển dụng 2. Mô tả các phần kiểm tra dữ liệu của form trên. Nguyen Ha Giang