Cấp bậc tác giả:

TRAINING

[TUT]Validation Control(FULL Lý thuyết + Demo)

Được viết bởi webmaster ngày 02/05/2013 lúc 11:58 PM
- 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 trường yêu cầu nhập số + User có thể submit giá trị ngoài miền cho phép…
  • 0
  • 21703

[TUT]Validation Control(FULL Lý thuyết + Demo)

Nội dung Validation control
- Giới thiệu việc xác nhận dữ liệu
- Quá trình validation trên web form
- Các validation control
1. RequiredFieldValidator
2. CompareValidator
3. RangeValidator
4. RegularExpressionValidator
5. CustomValidator
6. ValidationSummary

Tại sao phải validation?
- 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 trường yêu cầu nhập số
+ User có thể submit giá trị ngoài miền cho phép…
- Web app gặp phải một số khó khăn khi validation, do chúng 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ệ!

- Client side validation
+ Phụ thuộc vào browser
+ Phản hồi nhanh
+ Giảm việc post back
- Server side validation
+ Thực thi kể cả client side đã validation
+ Có thể check nâng cao
Sử dụng .NET class
Database

ValidationControl01.jpg
Hình 1

- 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 đị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
- Mỗi validation control gắn với 1 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 không có dữ liệu so sánh
- Khắc phục bằng cách thêm RequiredFieldValidator cho control

Quá trình Validation

- 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 bên client!
- 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 EnableValidation là true được kích hoạt
Validation không 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

- 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 không thực thi!

Các thuộc tính chung

Thuộc tínhÝ nghĩa
ControlToValidateTên control cần kiểm tra, phải xác định khi sử dụng VC
TextChuỗi thông báo xuất hiện khi có lỗi
ErrorMessageChuỗ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 không 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ư staic nhưng không chiếm vị trí
EnableClientScriptCho phép kiểm tra ở client hay không, mặc định là có

1. RequiredFieldValidator

- 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
- Minh họa dùng RequiredFieldValidator

ValidationControl02.jpg
Hình 2

Chạy web form

ValidationControl03.jpg
Hình 3

2. CompareValidator

- 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
- 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
- Minh họa dùng CompareValidator kiểm tra việc nhập giá trị số

ValidationControl04.jpg
Hình 4

- Chạy web form

ValidationControl05.jpg
Hình 5

3. RangeValidator

- 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 không nhập dữ liệu thì không 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
- Tạo web form nhập tuổi lao động, hợp lệ từ 18 - 55

ValidationControl06.jpg
Hình 6

- Chạy web form

ValidationControl07.jpg
Hình 7

4. RegularExpressionValidator

- 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

ValidationControl08.jpg
Hình 8

Ký hiệuMô tả
AKý tự chữ cái, đã được xác định, ví dụ: a
1Ký 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
\wKý tự thay thế là chữ cái
\dKý 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

- Tạo form check địa chỉ e-mail mà user nhập vào

ValidationControl09.jpg
Hình 9

- Chạy web form

ValidationControl10.jpg
Hình 10

5. CustomValidator

- Đ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:
+ ServerValidator: đặ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
- Minh họa: web form yêu cầu nhập 1 số, nếu số là lẻ thì không 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!)

ValidationControl11.jpg
Hình 11

- Khai báo sự kiện ServerValidator cho CustomValidator

ValidationControl12.jpg
Hình 12

- 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

- 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"); 
}

ValidationControl13.jpg
Hình 13

6. ValidationSummary

- Đ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

Demo sử dụng validation control

- 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 dưới

ValidationControl14.jpg
Hình 14

Điều khiểnKiểuThuộc tínhGiá trị
rfvTenDNRequiredField 
ControlToValidate
ErrorMessage
txtTenKH
Tên đăng nhập không rỗng
rfvMatKhauRequiredField
ControlToValidate
ErrorMessage
txtMatKhau
Mật khẩu không được rỗng
rfvMauKhauNLRequiredField
ControlToValidate
ErrorMessage
txtMauKhauNL
Không được rỗng
cvMatKhauNLCompareControlToValidate
ControlToCompare
ErrorMessage
txtMauKhauNL
txtMatKhau
Mật khẩu gõ lại không khớp
rfvTenKHRequiredField
ControlToValidate
ErrorMessage
txtTenKH
Họ tên không rỗng
cvNgaySinhCompare
ControlToValidate
Operator
ErrorMessage
txtNgaySinh
DataTypeCheck
Date
revEmailRegularExpression
ControlToValidate
ValidationExpression
ErrorMessage
txtEmail
Internet email
Email không hợp lệ
rvThuNhapRange
ControlToValidate
MaximumValue
MinimumValue
Type
ErrorMessage
txtThuNhap
50000000
1000000
Integer
Thu nhập từ 1 – 50 triệu
vsDanhSachLoiValidationSummary
HeaderText
ShowMessageBox
Danh sách các lỗi
true

- Chạy web form

ValidationControl15.jpg
Hình 15

ValidationControl16.jpg
Hình 16

Nguồn bài viết: Dngaz.com

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML