Xác thực (validate) dữ liệu là việc làm cần thiết để đảm bảo ứng dụng của chúng ta vận hành một cách trơn tru nhất. Thật may mắn, Liferay đã cung cấp một công cụ rất hữu ích và mạnh để chúng ta thực hiện công việc này. Bài viết sẽ giới thiệu và hướng dẫn cách thức thực hiện xác thực dữ liệu, cùng đọc nhé:
Phân loại
Trước hết, ta sẽ phân loại các kiểu dữ liệu cần phải xác thực. Ở đây, mình sẽ phân ra làm 03 loại đó là kiểu chuỗi, kiểu số và kiểu tệp tin.
Kiểu chuỗi
Thôn thường, ta sử dụng textbox và textarea để nhập dữ liệu. Vậy những điều gì cần phải xác thực khi nhập ta nhập vào một chuỗi?
- Cho phép rỗng hay không
- Phạm vi độ dài chuỗi (tối thiếu và tối đa)
- Là các chuỗi đặc biệt (địa chỉ email, địa chỉ web, ngày tháng,...)
- Không chứa các ký tự cụ thể (chứa số, ký tự)
- Ràng buộc với trường khác (xác nhận mật khẩu, email,...)
Kiểu số
Đối với kiểu dữ liệu số, ta cần quan tâm một số điều kiện sau đây:
- Cho phép rỗng hay không?
- Phạm vi giá trị (giá trị nhỏ nhất và lớn nhất)
- Là số nguyên hay số thực
Kiểu tệp tin
Kiểu dữ liệu cuối cùng mà tà cần quan tâm đó là kiểu tệp tin. Ở đây, ta chỉ có duy nhất một mối quan tâm đó là tệp tin mà ta tải lên có phải là tệp tin đúng yêu cầu hay không. Ta sử dụng phần mở rộng của tệp tin để xác thực việc này (ví dụ: ta chỉ chấp nhận các tệp tin ảnh như *.png, *.jpg, *.bmp,...)
Thẻ aui:validator
Thẻ aui:validator là công cụ xác thực mà Liferay đã cung cấp cho chúng ta. Thẻ này có hai thuộc tính như sau:
- Thuộc tính name: đây là thuộc tính bắt buộc phải có, tùy thuộc vào loại xác thực mong muốn mà chúng ta sẽ cung cấp giá trị tương ứng cho thuộc tính này. Các giá trị chấp nhận là:
- acceptFiles: các tệp tin được chấp nhận (sử dụng cho kiểu tệp tin). Thống báo khi có lỗi: Vui lòng nhập vào giá trị với phần mở rộng hợp lệ (X).
- alpha: chỉ cho phép nhập các ký tự (a-z,A-Z), không cho phép nhập các ký số (0-9) (áp dụng cho kiểu chuỗi). Vui lòng nhập vào chỉ ký tự alpha
- alphanum: cho phép nhập các ký tự (a-z,A-Z) và các ký số (0-9) (sử dụng cho kiểu chuỗi). Vui lòng nhập vào chỉ ký tự số alpha.
- date: cho phép nhập dữ liệu kiểu ngày tháng tức là chỉ cấp nhận các ký số (0-9) và các ký tự như / và : (áp dụng cho kiểu chuỗi). Vui lòng nhập vào một ngày hợp lệ.
- digits: cho phép nhập các số nguyên. Vui lòng nhập vào dạng số.
- email: cho phép nhập vào một địa chỉ thư điện tử: Thông báo lỗi là: Nhập đúng địa chỉ mail.
- equalTo: yêu cầu nhập nội dung giống với nội dung của một trường khác (xác nhận mật khẩu chẳng hạn): Thông báo khi có lỗi là: Vui lòng nhập vào giá trị giống như trên lần nữa.
- iri: Định danh tài nguyên quốc tế ( internationalized resource identifier), mở rộng của URL.
- max: giá trị số lớn nhất. Thông báo lỗi: Vui lòng nhập giá trị nhỏ hơn hoặc bằng X.
- min: giá trị số nhỏ nhất: Thông báo lỗi: Vui lòng nhập giá trị lớn hơn hoặc bằng X.
- maxLength: độ dài tối đa của chuỗi. Thông báo khi xảy ra lỗi: Vui lòng nhập vào không nhiều hơn X ký tự.
- minLength: độ dài tối thiểu của chuỗi được nhập vào. Thông báo khi có lỗi là: Vui lòng nhập vào ít nhất X ký tự.
- number: cho phép chỉ nhập số (số nguyên, số thực). Thông báo khi có lỗi: Bạn hãy nhập dữ liệu dạng số.
- required: bắt buộc phải nhập dữ liệu cho trường này. Trường yêu cầu bắt buộc. là thông báo khi có lỗi xảy ra.
- url: cho phép nhập vào một địa chỉ website và thông báo khi có lỗi là: Nhập đúng URL.
- Thuộc tính errorMessage: đây là thẻ không bắt buộc, nếu muốn hiển thị một thông báo của riêng bạn thị hãy nhập giá trị cho thuộc tính này, ngược lại, hệ thống sẽ hiển thị thông báo mặc định khi xác thực không thành công.
Các ví dụ
Dựa vào phân loại trên, mình sẽ đi làm các ví dụ minh họa cụ thể cho từng loại và từng trường hợp.
Kiểu chuỗi
Cho phép rỗng
Ta sẽ xác thực xem một trường (textbox hoặc textarea) đã được nhập dữ liệu hay vẫn còn bỏ trống. Đoạn code sau sẽ kiểm tra dữ liệu có rỗng hay không trước khi gửi dữ liệu xuống máy chủ:
<aui:input name="fullname">
<aui:validator name="required" errorMessage="error-message" ></aui:validator>
</aui:input>
<aui:validator name="required" errorMessage="error-message" ></aui:validator>
</aui:input>
Quan sát thấy, ta sẽ sử dụng thẻ <aui:validator /> với giá trị của thuộc tính name="required" sẽ yêu cầu trường fullname phải được nhập giá trị khác rỗng trước khi gửi xuống máy chủ. Ngược lại, sẽ có một thông báo với nội dung của thuộc tính errorMessage hoặc với một nội dung mặc định nếu bạn không khai báo thuộc tính này.
Phạm vi độ dài chuỗi
Để đảm bảo độ dài của chuỗi được nhập vào là hợp lệ, ta cần xác thực trước khi gửi chuỗi đã nhập xuống máy chủ. Việc xác thực độ dài sẽ được thực hiện như sau:
<aui:input name="code">
<aui:validator name="minLenght" >8</aui:validator>
<aui:validator name="maxLenght" >50</aui:validator>
</aui:input>
<aui:validator name="minLenght" >8</aui:validator>
<aui:validator name="maxLenght" >50</aui:validator>
</aui:input>
Ở đây, ta chỉ có thể nhập vào chuỗi có độ dài trong phạm vi từ 8 đến 50 ký tự mà thôi. Bạn có thể sử dụng riêng lẻ việc kiểm tra độ dài tối thiểu hoặc tối đa tùy vào yêu cầu của bài toán.
Các chuỗi đặc biệt
Các chuỗi đặc biệt hay sử dụng mà ta quan tâm gồm có: địa chỉ email, địa chỉ website và chuỗi ngày tháng. Chúng ta cần xác thực để đảm bảo dữ liệu được lữu trữ lại là đúng đắn. Để xác thực các chuỗi đặc biệt này, chúng ta chỉ cần thêm vào bên trong trường cần xác thực các đoạn code HTML sau:
<aui:validator name="email" ></aui:validator>
<aui:validator name="url" ></aui:validator>
<aui:validator name="date" ></aui:validator>
<aui:validator name="url" ></aui:validator>
<aui:validator name="date" ></aui:validator>
Không chứa các ký tự đặc biệt
Để đảm bảo cho các trường không chứa các ký tự không có trong bảng ký tự (non-alphabet) như: @, #, $,... chúng ta có thể sử dụng thẻ <aui:validator /> với giá trị của thuộc tính name là alpha hoặc alphanum. Cả hai loại này cho phép chúng ta nhập các ký tự có trong bảng chữ cái, ngoài ra, alphanum cho phép ta nhập cả ký số (0-9).
<aui:validator name="alpha" ></aui:validator>
<aui:validator name="alphanum" ></aui:validator>
Ràng buộc với trường khác
Ta xét trường hợp cần phải kiểm tra hai trường có giá trị bằng nhau. Cụ thể trong trường hợp này ta kiểm tra xem người dùng có nhập vào đúng mật khẩu hay không. Hãy xem ví dụ dưới đây:
<aui:input name="password" id="password" label="Password"><aui:validator name="required""></aui:validator">
</aui:input">
<aui:input name="repassword" label="Re Type Password"">
<aui:validator name="equalTo" >'#<portlet:namespace/">password'
</aui:validator">
</aui:input">
Kiểu số
Số nguyên dương
Nếu bạn chỉ muốn nhập các chữ số, tức là bạn chỉ muốn nhập vào một số nguyên thì bạn phải làm như ví dụ sau:
<aui:input name="grade" label="Grade"><aui:validator name="digits""></aui:validator">
<aui:validator name="min"">1</aui:validator">
<aui:validator name="max"">12</aui:validator">
</aui:input">
Như bạn thấy, ví dụ này cho phép ta nhập vào một số nguyên có giá trị từ 1 đến 12. Các giá trị ở ngoài phạm vi này không được chấp nhận.
Số thực
Nếu bạn muốn xác thực một giá trị thực trước khi gửi xuống máy chủ thì hãy làm theo ví dụ sau:
<aui:input name="percentOfPassedCourses" label="Percent of passed courses"><aui:validator name="number""></aui:validator">
<aui:validator name="min"">0</aui:validator">
<aui:validator name="max"">100</aui:validator">
</aui:input">
Ví dụ trên cho phép bạn xác thực một số thực có phạm vi từ 0 đến 100. Nếu bạn không nhập một số thực hoặc số thực không nằm trong phạm vi trên thì hệ thống sẽ gửi lại thông báo cho bạn.
Kiểu tệp tin
Hãy xem ví dụ sau đây:
<aui:input name="portrait" type="file"> <aui:validator name="acceptFiles">'jpg,png'</aui:validator></aui:input>
Trong ví dụ này, hệ thống chỉ chấp nhận loại tệp tin có phần mở rộng là jpg và png, nếu bạn chọn không đúng loại, hệ thống sẽ đưa ra thông báo cho bạn.
Mã nguồn
Mình đã cài đặt sẵn môt portlet ví dụ về việc xác thực dữ liệu (tải về tại đây). Trong ví dụ này, mình tạo một bảng có tên là Validator_Student với nội dung như sau:
CREATE TABLE Validator_Student (StudentId LONG not null primary key, Code VARCHAR(20) null,
Fullname VARCHAR(50) null,
Gender BOOLEAN,
Birthday DATE null,
Email VARCHAR(150) null,
Address VARCHAR(255) null,
Blog VARCHAR(255) null,
Mark DOUBLE
);
Chúng ta cần xác thực độ dài của các trường như Code, Fullname, Email, Address, Blog. Xác thực là địa chỉ thư điện tử với trường Email, địa chỉ website với trường Blog. Xác thực kiểu số có giới hạn từ 0 đến 10 với trường Mark.
Không có nhận xét nào:
Đăng nhận xét