Lab - 08 - Validation Control - 420350

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à <MSSV>_Lab08_Validation.
o Nến Project lại thành một file <MSSV>_Lab08_Validation.ziphoặc
<MSSV>_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)
CompareValidator Kiểm tra nếu mục dữ liệu nhập trong

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

CustomValidator vào control sử dụng client-side script hoặc
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:
- Bản control thành phần
Id Loại control Mục đích sử dụng
txtStudentID TextBox Nhận giá trị MSSV
txtPassword TextBox Nhận giá trị Password
txtRetypePassword TextBox Nhận giá trị nhập lại

Password
txtName TextBox Nhận giá trị Tên sinh viên
ddlSex DropDownList Cho phép lựa chọn giới tính
txtDateOfBirth TextBox Nhận giá trị ngày tháng năm

sinh
txtEmail TextBox Nhận giá trị địa chỉ email
txtTelephone TextBox Nhận giá trị số điện thoại
btnSubmit Button Kiểm tra dữ liệu nhập vào
btnClose Button Chứa giá trị trả về của

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
o Lưu ý: giá trị của DropDownList không được có dấu “<” và “>”. 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
 Danh sách PostBack của các Button như sau:
Button ID PostBackURL
btnSubmit ~/SignUpSucceed.aspx
btnClose ~/Home.aspx
 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
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:
- Thiết lập các giá trị property cho rfvStudentID như sau
Property Giá trị
ErrorMessage Input Student ID
Text *
ControlToValidate txtStudentID
SetFocusOnError True
- Thiết lập các giá trị property cho rfvPassword như sau
Property Giá trị
ErrorMessage Input Password
Text *
ControlToValidate txtPassword
- Thiết lập các giá trị property cho rfvRetypePassword như sau
Property Giá trị
ErrorMessage Input Retype password
Text *
ControlToValidate txtRetypePassword
- Thiết lập các giá trị property cho rfvName như sau
Property Giá trị
ErrorMessage Input Name
Text *
ControlToValidate txtName
- Thiết lập các giá trị property cho rfvDateOfBirth như sau
Property Giá trị
ErrorMessage Input Date of birth
Text *
ControlToValidate txtDateOfBirth
- Thiết lập các giá trị property cho rfvEmail như sau
Property Giá trị
ErrorMessage Input Email address
Text *
ControlToValidate txtEmail
- Thiết lập các giá trị property cho rfvTelephone như sau
Property Giá trị
ErrorMessage Input Telephone number
Text *
ControlToValidate txtTelephone
- Sau khi deploy lên Browser sẽ nhận được kết quả như sau:
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.
- Thiết lập giá trị property cho svErrorList như sau
Property Giá trị
HeaderText Error list
- Deploy lên Browser sẽ nhận được kết quả như sau.
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.

o Text: Chuỗi hiển thị (ngay thị vị trí control).
o ControlToValidate: chỉ định Control được kiểm tra.
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:
- 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ị
ErrorMessage Retype Password do not match
Text *
ControlToCompare txtPassword
Operator Equal
Type String
- 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ị
ErrorMessage Sex must be Male or Female
Text *
ControlToValidate ddlSex
Operator NotEqual
Type String
ValueToCompare Choose…
- Deploy lên Browser sẽ nhận được kết quả như sau
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.
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:
- 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ị
ErrorMessage Date of birth must be mm/dd/yyyy and

between 01/01/1950 and Now
Text *
MaximumValue
MinimumValue 01/01/1950
Type Date
- Do ở đây đây giá trị MaximumValue chưa được xác định trước nên cần phải viết
code để lấy ra giá trị này. Định nghĩa lại sự kiện Page_Load của ở file
Default.aspx.cs như sau:
protectedvoidPage_Load(objectsender, EventArgse)
{
rvDateOfBirth.MaximumValue = DateTime.Now.ToString("MM/dd/yyyy");
}
- Lưu ý: do ngày giờ của hệ thống được thiết lập mặt định theo kiểu của Mỹ là
MM/dd/yyyy. Kiếu hiệu MM là Month, mm là Minute.
- Deploy lên Browser sẽ nhận được kết quả như sau
3.7 Ứng dụng RegularExpressionValidator

- RegularExpressionValidator: 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 theo một mẫu định dạng (hay công
thức Regular Expression) được chứa trong thuộc tính ValidationExpression.
o ValidationExpression: Chuỗi định dạng dữ liệu nhập vào (công thức
Regular Expression).
- Bổ sung các RangeValidator vào trang Default.aspx như hình sau:
- Thiết lập các giá trị property cho revEmail như sau:
Property Giá trị
ErrorMessage Email address must be abc@abc.abc
Text *
ValidationExpression \w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-
.]\w+)*
- ASP.Net đã thiết lập sẵn một số chuỗi định dạng ValidationExpression. Để chọn
chuỗi định dạng Email thực hiện hiện như sau:
o Click chuột vào button … trong property ValidationExpression
o Chọn chuỗi định dạng Internet URL
- Thiết lập các giá trị property cho revTelephone như sau:
Property Giá trị
ErrorMessage Email address must be abc@abc.abc
Text *
ValidationExpression \((\d{2}|\d{3})\)\-\d{7}
- Do chuỗi định dạng số điện thoại không có trong bản thiết lập sẵn của ASP.Net
nên cần phải viết lại bằng tay.
3.8 Ứng dụng CustomValidator

- CustomValdator: cho phép người dùng kiểm trưa dữ liệu nhập vào control được
chỉ định tới bởi thuộc tính ControlToValidate với các hàm được thiết kế bàn tay.
Có 2 dạng là thực hiện việc kiểm tra trên Client hay trên Server.
o ClientValidationFunction: Chỉ định Hàm JavaScript thực hiện việc kiểm tra
này trên Client.
3.8.1 Thực hiện việc kiểm tra từ Server

- Bổ sung các CustomValidator vào trang Default.aspx như hình sau:
- Thiết lập các giá trị property cho cvStudentID như sau:
Property Giá trị
ErrorMessage Student ID must have 8 characters
Text *
- Do việc thực hiện kiểm tra này được thực hiện từ phía Server nên cần phải phát
sinh sự kiện ServerValidate cho cvStudentID. Chọn phần Event trên cửa sổ
Property để định phát sinh sự kiện ServerValidate cho control này (có thể double
click vào control cvStudentID để phát sinh sự kiện này).
- Định nghĩa cho sự kiện ServerValidate trên control cvStudenitID ở file

Default.aspx.cs như sau:
protectedvoidcvStudentID_ServerValidate(objectsource, ServerValidateEventArgsargs)
{
if (txtStudentID.Text.Length == 8)
args.IsValid = true;
else
args.IsValid = false;
}
- Lưu ý: Các control Validator khác phải được kiểm tra đúng hết thì sự kiện
ServerValidate này mới được thực hiện. Do sự kiện này được định nghĩa xử lý ở
phía Server. Nên dữ liệu nhập vào phải thực thỏa điểu kiện kiểm tra của các
control Validator khác trước thì trang ASPX mới được PostBack về Server.
3.8.2 Thực hiện việc kiểm tra từ phái Client

- Bổ sung các CustomValidator vào trang Default.aspx như hình sau:
- Thiết lập các giá trị property cho cvPassword như sau:
Property Giá trị
ErrorMessage Password must have minimum 8 characters
Text *
ClientValidationFunction CheckPassword
- Do việc kiểm tra này sẽ được thực hiện ở phía Client nên cần phải lập trình một
hàm JavaScript CheckPassword thực hiện việc kiểm tra này. Chuyển sang chế độ
Source của file Default.aspx để thực hiện việc định nghĩa hàm CheckPassword
như sau:
<scripttype="text/javascript">
functionCheckPassword(e, args) {
if (args.Value.length>= 8)
args.IsValid = true;
else
args.IsValid = false;
}
</script>
4 Bài tập
- Sử dụng tất cả các Validation Control để kiểm tra phần các thông tin nhập vào của
trang đăng ký một tài khoảng Gmail (bài tập Lab 07).

Lab - 08 - Validation Control - 420350

Uploaded by

Copyright:

Available Formats

You might also like

Lab - 08 - Validation Control - 420350

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab - 08 - Validation Control - 420350

Uploaded by

Copyright:

Available Formats

ThS.

Trần Thị Bích Hạnh – Nguyễn Đức Huy

Trường Đại Học Khoa Học Tự Nhiên

1 Mục đích - Yêu cầu

1.2 Yêu cầu

2 Nội dung cơ bản

Validation Control Sử dụng khi

CompareValidator Kiểm tra nếu mục dữ liệu nhập trong

sánh với một giá trị cụ thể

Kiểm tra nếu mục dữ liệu nhập trong

Kiểm tra nếu mục dữ liệu nhập trong

Kiểm tra tính đúng đắn của dữ liệu nhập

Hiển thị tất cả các lỗi kiểm tra xảy ra trong

3 Bài tập thực hành

3.2 Tạo website application

- Thiết kế form có dạng như sau cho trang Default.aspx:

- Bản control thành phần

Id Loại control Mục đích sử dụng

txtStudentID TextBox Nhận giá trị MSSV

txtPassword TextBox Nhận giá trị Password

txtRetypePassword TextBox Nhận giá trị nhập lại

txtName TextBox Nhận giá trị Tên sinh viên

ddlSex DropDownList Cho phép lựa chọn giới tính

txtDateOfBirth TextBox Nhận giá trị ngày tháng năm

txtEmail TextBox Nhận giá trị địa chỉ email

txtTelephone TextBox Nhận giá trị số điện thoại

btnSubmit Button Kiểm tra dữ liệu nhập vào

btnClose Button Chứa giá trị trả về của

 Chọn trang cần PostBack đến

 Danh sách PostBack của các Button như sau:

3.3 Ứng dụng RequiredFieldValidator

Property Giá trị

ErrorMessage Input Student ID

Property Giá trị

ErrorMessage Input Password

Property Giá trị

ErrorMessage Input Retype password

Property Giá trị

ErrorMessage Input Name

Property Giá trị

ErrorMessage Input Date of birth

Property Giá trị

ErrorMessage Input Email address

Property Giá trị

ErrorMessage Input Telephone number

3.4 Ứng dụng ValidationSummary

- Thiết lập giá trị property cho svErrorList như sau

Property Giá trị

HeaderText Error list

- Deploy lên Browser sẽ nhận được kết quả như sau.

3.5 Ứng dụng CompareValidator

o ErrorMessage: Thông báo lỗi (được hiển thị trong ValidationSummary)

Property Giá trị

ErrorMessage Retype Password do not match

Property Giá trị

ErrorMessage Sex must be Male or Female

- Deploy lên Browser sẽ nhận được kết quả như sau

3.6 Ứng dụng RangeValidator