Tạo trang đăng ký đơn giản với ASP.NET (continue)


Từ: 14:35 18/09/2014
Bài: 11
Cảm ơn: 1
Thích: 1

Bài trước mình đã tạo nên các trường sẽ nhưng chưa bắt lỗi cho các trường này.

- Trước tiên đôi với trường First Name ta thêm vào: <asp:RequiredFieldValidator> mục đích để tránh người dùng bỏ trống trường.

<asp:RequiredFieldValidator runat="server" ID="rfvFirstName" ControlToValidate="txtfirstname" Display="Dynamic" Text="*"
ErrorMessage="Error First Name" ValidationGroup="abc" />

Trong đó cần chú ý tới các thuộc tính:

  • ControlToValidate: chỉ đến điều khiển sẽ được kiểm tra
  • Text: Hiển thị nội dung khi phát sinh ra lỗi.
  • ErrorMessage: Thông báo lỗi khi kiểm tra.
  • Display: cách hiển thị.
  • ValidationGroup: Nhóm Validate.

Tương tự như đối với Last Name cũng vậy ta chỉ cần thay đổi các thuộc tính ControlToValidate, ErrorMessage sao cho phù hợp với trường Last Name.

<asp:RequiredFieldValidator runat="server" ControlToValidate="txtlastname" Display="Dynamic" Text="*" ErrorMessage="Error Last Name" ValidationGroup="abc" />

- Tiếp theo đối với Sex( hay giới tính): ta sẽ sử dụng <asp:CustomValidator> để tổng hợp lỗi.

<asp:CustomValidator runat = "server" ID = "CSVali" ValidationGroup = "abc" ClientValidationFunction = "check" OnServerValidate = "CSVali_ServerValidate" ErrorMessage = "Error" EnableClientScript = "true" Display = "Dynamic" ForeColor = "Red" />

Trong đó: Cần chú ý tới.

  • ClientValidationFunction: tên của một hàm client-side để thực hiện kiểm tra trên client-side ( ở đây là hàm check).
  • OnServerValidate: Sự kiện được đưa ra khi CustomValidatar thực hiện kiểm chứng.

- Đối với trường Date thì ta sử dụng  <asp:RequiredFieldValidator> và <asp:CompareValidator>. <asp:CompareValidator> dùng để kiểm tra dữ liệu nhập vào.

<asp:CompareValidator ID="chekc_date" runat="server" ControlToValidate="txtdate" Text="*" ErrorMessage="Error Date Format" Operator="DataTypeCheck" Type="Date" ValidationGroup="abc"/><br />

Trong đó: 

  • ControlToValidate: điểu khiển của Form sẽ được kiểm tra.
  • Type: Kiểu của giá trị sẽ được so sánh
  • Operator: Toán tử so sánh.

- Đối với UserName

<asp:RequiredFieldValidator runat="server" ControlToValidate="txtname" Text="*" ErrorMessage="Error Name" Display="Dynamic" ValidationExpression="abc" />

- Đối với trường PassWord:

 <asp:RequiredFieldValidator runat="server" ControlToValidate="txtpass" Display="Dynamic" Text="*" ErrorMessage="Error PassWord" ValidationGroup="abc" />

- Trường Re- PassWord: thì cũng gần giống với Date cũng sử dụng <asp:CompareValidator> nhưng có thêm thuộc tính ControlToCompare Điểu khiển dùng để so sánh giá trị.

<asp:CompareValidator runat="server" ID="cpmMatkhau" ControlToValidate="txtre_pass" ControlToCompare="txtpass" Text="*" Display="Dynamic" ErrorMessage="Mật khẩu chưa khớp" Operator="Equal" ValidationGroup="abc" />

- Trường Email dùng RegularExpressionValidator để so sánh giá trị nhập vào với 1 quy tắc được định trước. Đối với điều khiển RegularExpressionValidator thì thuộc tính ValidationExpression dùng để quy định biểu mẫu nhập liệu.

<asp:RegularExpressionValidator ID="revEmail" ErrorMessage="Email Error" ControlToValidate="txtemail" ValidationExpression=".*@.*\..*" Display="Dynamic" ValidationGroup="abc" EnableClientScript="true" runat="server" />

- Sau nút Button thì ta sẽ sử dụng điều khiển ValidationSummary cho phép bạn liệt kê tất cả các các lỗi kiểm tra trên trang từ những điều khiển validator vào một vị trí.

<asp:ValidationSummary runat="server" ID="vsError" ValidationGroup="abc" />

- Sau khi liệt kê các lỗi thì ta sẽ thêm 1 Label nhằm đưa ra các lỗi mà người dùng gặp phải khi đăng ký

- Ở trường Sex (hay giới tính) có sử dụng RadioButton. Để bắt lỗi RadioButton bằng javascript và sử dụng hàm check() để bắt lỗi tránh trường hợp người dùng tích cả hai hay không tích. Thêm hàm check() ở <form id="form1" runat="server" onsubmit="return check();">.

- Và bây giờ ta sẽ viết sự kiện khi nhấn nút "Submit" trong phần này ta sẽ chủ yếu bắt lỗi của trường Sex.

Đầu tiên kiểm tra xem nếu mà người dùng tick vào ô giới tính làm Boy(Nam) thì lưu vào 1 biến session["Sex"] = rdo1.Text; Tương tự như vậy khi người dùng tick vào ô giới tính là Girl(Nu) thì vẫn lưu vào biến session["Sex"] = rdo2.Text;

Nếu mà người dùng đăng ký thành công có thể hiển thị ra màn hình là "Bạn đã đăng ký thành công!"

Mã nguồn tham khảo: http://www.mediafire.com/download/6irvdoc85mn5jw9/DangKy.rar 

Label
Từ: 15:10 16/10/2013
Bài: 10
Cảm ơn: 4
Thích: 0

Phát hiện ra một cơ số lỗi, đố các bạn biết ở đâu? :p

Mà thuộc tính text và errormessage cùng để thông báo nội dung lỗi, sao lại phải dùng cả 2 nhỉ? Khác nhau như nào thế bạn?

Label
Từ: 14:35 18/09/2014
Bài: 11
Cảm ơn: 1
Thích: 1
  • Text: Hiển thị nội dung khi phát sinh ra lỗi.
  • ErrorMessage: Thông báo lỗi khi kiểm tra.​

​Cái ErrorMessage là khi bạn nhấn nút submit thì sẽ hiện lên còn với Text thì khi bạn bỏ qua nó thì mà không nhập trong khi trường đó bắt nhập thì nó sẽ hiện lên "*" để bạn chú ý.