Xem mẫu
- ThS. Trần Thị Bích Hạnh – Nguyễn Đức Huy
Lab – 08 – Validation Control
2009
Trong Lab 08 này, hướng dẫn cách sử dụng nhóm Validation Control
của ASP.Net trong kiểm tra các dữ liệu input của người dùng website.
Trường Đại Học Khoa Học Tự Nhiên
Khoa Công Nghệ Thông Tin
Bộ môn Công Nghệ Phần Mềm
Môn: Công nghệ Web ASP.Net
- December 12, 2009 LAB – 08 – VALIDATION CONTROL
1 Mục đích - Yêu cầu
1.1 Mục đích
- Biết công dụng của các control trong nhóm Validation Control của ASP.Net.
- Áp dụng được các Control này trong bài tập thực hành để kiểm tra việc dữ liệu
nhập vào của người dùng.
1.2 Yêu cầu
- Áp dụng để thực hiện xây dựng một trang ASPX đăng ký tài khoảng mới.
- Bài tập sinh viên lưu lại dưới định dạng sau:
o Tạo Website Application có tên là _Lab08_Validation.
o Nến Project lại thành một file _Lab08_Validation.ziphoặc
_Lab08_Validation.rar.
- Thời gian làm bài: 07 ngày.
2 Nội dung cơ bản
- Công dụng của nhóm Validattion Control là kiểm tra tính đúng đắng của dữ liệu
do client nhập vào trước khi trang ASPX được gửi về Server.
- Validation Control có 6 control hỗ trợ cho việc kiểm tra dữ liệu input của người
dùng website.
Validation Control Sử dụng khi
Kiểm tra nếu dữ liệu trong Control khác giá
RequiredFieldValidator
trị cho trước (mặc định là rỗng)
Kiểm tra nếu mục dữ liệu nhập trong
CompareValidator
Control giống với Control khác hoặc so
Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 2
- December 12, 2009 LAB – 08 – VALIDATION CONTROL
sánh với một giá trị cụ thể
Kiểm tra nếu mục dữ liệu nhập trong
RangeValidator
Control nằm trong khoảng 2 giá trị
Kiểm tra nếu mục dữ liệu nhập trong
RegularExpressionValidator
control thỏa 1 công thức định dạng chỉ định
Kiểm tra tính đúng đắn của dữ liệu nhập
vào control sử dụng client-side script hoặc
CustomValidator
a server-side code, hoặc cả 2
Hiển thị tất cả các lỗi kiểm tra xảy ra trong
ValidationSummary
trang
3 Bài tập thực hành
3.1 Đặc tả yêu cầu
- Thiết kế một trang ASPX có chức năng đăng ký thông tin sinh viên.
3.2 Tạo website application
- Tạo một project Web Application có cấu truc website như sau:
- Thiết kế form có dạng như sau cho trang Default.aspx:
Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 3
- December 12, 2009 LAB – 08 – VALIDATION CONTROL
- Bản control thành phần
Id Loại control Mục đích sử dụng
Nhận giá trị MSSV
TextBox
txtStudentID
Nhận giá trị Password
TextBox
txtPassword
Nhận giá trị nhập lại
TextBox
txtRetypePassword
Password
Nhận giá trị Tên sinh viên
TextBox
txtName
Cho phép lựa chọn giới tính
DropDownList
ddlSex
Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 4
- December 12, 2009 LAB – 08 – VALIDATION CONTROL
Nhận giá trị ngày tháng năm
TextBox
txtDateOfBirth
sinh
Nhận giá trị địa chỉ email
TextBox
txtEmail
Nhận giá trị số điện thoại
TextBox
txtTelephone
Kiểm tra dữ liệu nhập vào
Button
btnSubmit
Chứa giá trị trả về của
Button
btnClose
txtEmail
- Thay đổi giá trị property TextMode của txtPassword và txtRetypePassword thành
Password.
- Trong DropDownList ddlSex sẽ có 3 giá trị là: Choose…, Male và Female. Cách
thêm item vào trong ddlSex như sau:
o Chọn ddlSex.
o Click vào mũi tên phía Trên Phải của ddlSex. Chọn tiếp Edit Item.
o Chọn Add và thêm các item vào trong Item list của ddlSex
Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 5
- December 12, 2009 LAB – 08 – VALIDATION CONTROL
o Lưu ý: giá trị của DropDownList không được có dấu “”. Vì khi giá
trị này được chọn sẽ bị hiểu nhằm thẻ HTML mới (phát sinh lỗi ngoại lệ).
o Đặt propertyPostBackURL cho 2 button: btnSumit và btnClose để
PostBack đến các trang khác.
Click vào nut … của PostBackURL để chọn trang ASPX cần
PostBack đến
Chọn trang cần PostBack đến
Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 6
- December 12, 2009 LAB – 08 – VALIDATION CONTROL
Danh sách PostBack của các Button như sau:
Button ID PostBackURL
~/SignUpSucceed.aspx
btnSubmit
~/Home.aspx
btnClose
Do các control Validator thực hiện việc kiểm tra trước khi thực hiện
PostBack trang. Nên khi Click vào btnClose thì cần phải vô hiệu hóa
chức năng kiểm tra của các control Validator bằng cách set property
CausesValidation của btnClose là False.
3.3 Ứng dụng RequiredFieldValidator
- RequiredFieldValidator: cho phép kiểm tra dữ liệu nhập vào control được chỉ đính
tới bởi property ControlToValidate phải khác với dữ liệu của property
Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 7
- December 12, 2009 LAB – 08 – VALIDATION CONTROL
InitialValue. Mặt định giá trị trong property InitialValue là rỗng, do đó giá trị của
Control cần kiểm tra phải khác rỗng (tức cần phải được nhập liệu vào trong
control này).
- Các property cần thiết lập thông số:
o ErrorMessage: Thông báo lỗi (được hiển thị trong ValidationSummary)
o Text: Chuỗi hiển thị (ngay thị vị trí control)
o ControlToValidate: chỉ định Control được kiểm tra
o InitialValue: Giá trị được so sánh (thông thường bỏ trống, không thay đổi
giá trị ở Property này).
o SetFocusOnError: Tự động forcus đến Control này khi dữ liệu nhập không
đúng (nếu có nhiều Validation Control đều set property là này True thì nó
sẽ Focus đến Control đầu tiên bị sai).
- Bổ sung các RequiredFieldValidator vào trang Default.aspx như hình sau:
Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 8
- December 12, 2009 LAB – 08 – VALIDATION CONTROL
- Thiết lập các giá trị property cho rfvStudentID như sau
Property Giá trị
Input Student ID
ErrorMessage
*
Text
txtStudentID
ControlToValidate
True
SetFocusOnError
- Thiết lập các giá trị property cho rfvPassword như sau
Property Giá trị
Input Password
ErrorMessage
Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 9
- December 12, 2009 LAB – 08 – VALIDATION CONTROL
*
Text
txtPassword
ControlToValidate
True
SetFocusOnError
- Thiết lập các giá trị property cho rfvRetypePassword như sau
Property Giá trị
Input Retype password
ErrorMessage
*
Text
txtRetypePassword
ControlToValidate
True
SetFocusOnError
- Thiết lập các giá trị property cho rfvName như sau
Property Giá trị
Input Name
ErrorMessage
*
Text
txtName
ControlToValidate
True
SetFocusOnError
- Thiết lập các giá trị property cho rfvDateOfBirth như sau
Property Giá trị
Input Date of birth
ErrorMessage
*
Text
txtDateOfBirth
ControlToValidate
True
SetFocusOnError
Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 10
- December 12, 2009 LAB – 08 – VALIDATION CONTROL
- Thiết lập các giá trị property cho rfvEmail như sau
Property Giá trị
Input Email address
ErrorMessage
*
Text
txtEmail
ControlToValidate
True
SetFocusOnError
- Thiết lập các giá trị property cho rfvTelephone như sau
Property Giá trị
Input Telephone number
ErrorMessage
*
Text
txtTelephone
ControlToValidate
True
SetFocusOnError
- Sau khi deploy lên Browser sẽ nhận được kết quả như sau:
Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 11
- December 12, 2009 LAB – 08 – VALIDATION CONTROL
3.4 Ứng dụng ValidationSummary
- Tổng hợp và hiển thị tất cả các thông báo lỗi của các Validation Control khác.
- Đặt tiêu đề của cho danh sách lỗi trong propery HeaderText của
ValidationSummary.
- Bổ sung control ValidationSummary vào trang Default.aspx.
Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 12
- December 12, 2009 LAB – 08 – VALIDATION CONTROL
- Thiết lập giá trị property cho svErrorList như sau
Property Giá trị
Error list
HeaderText
- Deploy lên Browser sẽ nhận được kết quả như sau.
Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 13
- December 12, 2009 LAB – 08 – VALIDATION CONTROL
3.5 Ứng dụng CompareValidator
- CompareValidator: cho phép kiểm tra dữ liệu nhập vào control được chỉ đính tới
bởi thuộc tính ControlToValidate được so sánh với các phương thức so sánh được
chỉ định trong Operator với dữ liệu được chứa trong Control được chỉ định bởi
thuộc tính ControlToCompare hay ValueToCompare.
- Các property cần thiết lập thông số:
Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 14
- December 12, 2009 LAB – 08 – VALIDATION CONTROL
ErrorMessage: Thông báo lỗi (được hiển thị trong ValidationSummary)
o
Text: Chuỗi hiển thị (ngay thị vị trí control).
o
ControlToValidate: chỉ định Control được kiểm tra.
o
SetFocusOnError: Tự động forcus đến Control này khi dữ liệu nhập không
o
đúng (nếu có nhiều Validation Control đều set property là này True thì nó
sẽ Focus đến Control đầu tiên bị sai).
o ControlToCompare: Control cần lấy giá trị so sánh.
o Operator: Phương thức so sánh. Với các giá trị như sau: Equal – bằng,
NotEqual – không bằng, GreaterThan – lớn hơn, GreaterThanEqual – lớn
hơn hoặc bằng, LessThan – nhỏ hơn, LessThanEqual – nhỏ hơn hoặc bằng,
DataTypeCheck – kiểm tra kiểu dữ liệu.
o Type: Kiểu dữ liệu
o ValueToCompare: Giá trị cần so sánh.
- Bổ sung các CompareValidator vào trang Default.aspx như hình sau:
Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 15
- December 12, 2009 LAB – 08 – VALIDATION CONTROL
- Do yêu cầu của txtRetypePassword có dữ liệu nhập vào phải giống với
txtPassword (so sánh dữ liệu nhập vào với dữ liệu của một control được chỉ định).
Nên thiết lập các giá trị property cho cvRetypePassword như sau
Property Giá trị
Retype Password do not match
ErrorMessage
*
Text
txtPassword
ControlToCompare
txtRetypePassword
ControlToValidate
Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 16
- December 12, 2009 LAB – 08 – VALIDATION CONTROL
Equal
Operator
String
Type
True
SetFocusOnError
- Do bắt người dùng phải chọn giới tính là Male hay là Female. Nhưng mặt định o
giá trị được chọn trong ddlSex là Choose… Vậy cần phải so sánh giá trị trong
ddlSex khác với giá trị Choose… này (so sánh dữ liệu nhập vào với một giá trị đã
được cho trước). Thiết lập các giá trị property cho cvSex như sau
Property Giá trị
Sex must be Male or Female
ErrorMessage
*
Text
ddlSex
ControlToValidate
NotEqual
Operator
True
SetFocusOnError
String
Type
Choose…
ValueToCompare
- Deploy lên Browser sẽ nhận được kết quả như sau
Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 17
- December 12, 2009 LAB – 08 – VALIDATION CONTROL
3.6 Ứng dụng RangeValidator
- RangeValidatior: cho phép kiểm tra dữ liệu nhập vào control được chỉ đính tới bởi
thuộc tính ControlToValidate phải thuộc về một giá trị nằm trong khoản giữa của
2 thuộc tính MinimumValue và MaximumValue.
- Các property cần thiết lập thông số:
o ErrorMessage: Thông báo lỗi (được hiển thị trong ValidationSummary)
o Text: Chuỗi hiển thị (ngay thị vị trí control).
o ControlToValidate: chỉ định Control được kiểm tra.
Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 18
- December 12, 2009 LAB – 08 – VALIDATION CONTROL
o SetFocusOnError: Tự động forcus đến Control này khi dữ liệu nhập không
đúng (nếu có nhiều Validation Control đều set property là này True thì nó
sẽ Focus đến Control đầu tiên bị sai).
o MaximumValue: Giá trị chặn lớn nhất.
o MinimumValue: Giá trị chặn dưới nhỏ nhất.
o Type: Kiểu dữ liệu
- Bổ sung các RangeValidator vào trang Default.aspx như hình sau:
Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 19
- December 12, 2009 LAB – 08 – VALIDATION CONTROL
- Yêu cầu là điều kiện của dữ liệu nhập vào txtDateOfBirth phải này trong khoảng
từ ngày 01/01/1950 đến tới điểm hiện tại (thời điểm Page được load lên).
- Thiết lập các giá trị property cho rvDateOfBirth như sau:
Property Giá trị
Date of birth must be mm/dd/yyyy and
ErrorMessage
between 01/01/1950 and Now
*
Text
txtRetypePassword
ControlToValidate
True
SetFocusOnError
Trường Đại Học Khoa Học Tự Nhiên | Công Nghệ Web ASP.Net 20
nguon tai.lieu . vn
