Xây dựng thư viện JavaScript kiểm tra dữ liệu người dùng

[duonghy2]

Xây dựng thư viện JavaScript kiểm tra dữ liệu người dùng
có pro nào giúp e với có thế nêu ý tưởng cho e dc ko

[Sounj]

ASP.net thì dùng bộ công cụ Validator có sẵn
MVC thì dùng System.ComponentModel.DataAnnotations và các thư viện liên quan

Còn ko thì tìm mấy cái thư viện javascript viết sẵn trên mạng ấy => Mấy bộ công cụ này đều là open source cả. DEMO đấy .. VD như cái này : http://bassistance.de/jquery-plugins...in-validation/

Chừng nào Pro rồi thì hãy nghĩ tới tự mình viết lấy =)) ( mà thực ra pro cũng chả có mấy ai rỗi hơi đi tự viết mấy cái thư viện này đâu, trừ mấy cha chuyên javascript )

[duonghy2]

Thế mới khổ thầy giáo giao cho cái bài tập lớn làm cái này

[Sounj]

Thế mới khổ thầy giáo giao cho cái bài tập lớn làm cái này

Tôi có thể cho bạn 1 gợi ý như thế này

<form action="index.php" method="post" _NeddCheck="true">
<input type="text" id="tuoi" name="tuoi" _NeddCheck="true" _IsInteger="Tuổi phải là số nguyên hợp lệ" 
_MinValue="12|Tuổi phải lớn hơn 12" _ManValue="90|Tuổi phải bé hơn 90" _SpanError="tuoiError"  />

<span id="tuoiError" ></span>
</form>

Code này lấy ý tưởng từ cách mà MVC 3 thực hiện kiểm tra dữ liệu

Bạn có thể nhận thấy thẻ input ở trên dùng rất nhiều thuộc tính như _NeddCheck, _IsInteger, ..v.....v.... vốn ko hề có trong html chuẩn. Thực ra đó là các thuộc tính dùng để qui định việc cần/ ko cần kiểm tra dữ liệu, và nếu kiểm tra thì kiểm tra như thế nào, câu báo lỗi ra sao, vị trí bảo lỗi là thẻ có id nào

Chẳng hạn, bạn viết 1 thư viện javascript thực hiện như thế này :
+ Khi trang được load xong ( bắt sự kiện $(document).ready() với jquery hoặc sự kiện onload() của javascript ), tìm tất cả các thẻ form có đăng ký kiểm tra dữ liệu ( đó là những thẻ form có khai báo _NeddCheck="true" ), đăng ký hàm kiểm tra chặn sự kiện submit của các form này

+ Mỗi khi các form này đc submit, hàm kiểm tra của bạn sẽ được gọi, lúc đó bạn tiến hành như sau:

Duyệt tất cả các thẻ input bên trong form, tìm các thẻ có đăng ký kiểm tra ( có khai báo _NeddCheck="true" ). Khi đó, bạn lấy ra giá trị ( thuộc tính value ) của thẻ input và thực hiện các kiểm tra cần thiết, chẳng hạn
- _IsInteger="Tuổi phải là số nguyên hợp lệ" : Giá trị trong thẻ input này phải là số nguyên. Nếu ko hợp lệ thì chuỗi "Tuổi phải là số nguyên hợp lệ" sẽ được xuất ra tại thẻ span có id cho bởi thuộc tính _SpanError
- _MinValue="12|Tuổi phải lớn hơn 12" : Giá trị của thẻ input phải là số, >=12. Nếu sai, thông báo lỗi là "Tuổi phải lớn hơn 12"
Nếu có bất kỳ 1 thẻ input nào kiểm tra sai, chặn quá trình submit bằng cách cho hàm return false. Ngược lại, return true để cho phép quá trình submit tiếp tục

Hic, mình trình bày tệ quá, hồi học sinh đã dở nhất môn văn rồi, thành ra cũng ko biết viết thế nào cho dễ hiểu cả. Nói tóm lại là muốn viết đc 1 cái thư viện cho ra hồn, bạn phải có hiểu biết khá sâu về mô hình DOM của javascript, còn ko thì chịu, ko thể giúp gì cho bạn đc

[duonghy2]

Tôi có thể cho bạn 1 gợi ý như thế này

<form action="index.php" method="post" _NeddCheck="true">
<input type="text" id="tuoi" name="tuoi" _NeddCheck="true" _IsInteger="Tuổi phải là số nguyên hợp lệ" 
_MinValue="12|Tuổi phải lớn hơn 12" _ManValue="90|Tuổi phải bé hơn 90" _SpanError="tuoiError"  />

<span id="tuoiError" ></span>
</form>

Code này lấy ý tưởng từ cách mà MVC 3 thực hiện kiểm tra dữ liệu

Bạn có thể nhận thấy thẻ input ở trên dùng rất nhiều thuộc tính như _NeddCheck, _IsInteger, ..v.....v.... vốn ko hề có trong html chuẩn. Thực ra đó là các thuộc tính dùng để qui định việc cần/ ko cần kiểm tra dữ liệu, và nếu kiểm tra thì kiểm tra như thế nào, câu báo lỗi ra sao, vị trí bảo lỗi là thẻ có id nào

Chẳng hạn, bạn viết 1 thư viện javascript thực hiện như thế này :
+ Khi trang được load xong ( bắt sự kiện $(document).ready() với jquery hoặc sự kiện onload() của javascript ), tìm tất cả các thẻ form có đăng ký kiểm tra dữ liệu ( đó là những thẻ form có khai báo _NeddCheck="true" ), đăng ký hàm kiểm tra chặn sự kiện submit của các form này

+ Mỗi khi các form này đc submit, hàm kiểm tra của bạn sẽ được gọi, lúc đó bạn tiến hành như sau:

Duyệt tất cả các thẻ input bên trong form, tìm các thẻ có đăng ký kiểm tra ( có khai báo _NeddCheck="true" ). Khi đó, bạn lấy ra giá trị ( thuộc tính value ) của thẻ input và thực hiện các kiểm tra cần thiết, chẳng hạn
- _IsInteger="Tuổi phải là số nguyên hợp lệ" : Giá trị trong thẻ input này phải là số nguyên. Nếu ko hợp lệ thì chuỗi "Tuổi phải là số nguyên hợp lệ" sẽ được xuất ra tại thẻ span có id cho bởi thuộc tính _SpanError
- _MinValue="12|Tuổi phải lớn hơn 12" : Giá trị của thẻ input phải là số, >=12. Nếu sai, thông báo lỗi là "Tuổi phải lớn hơn 12"
Nếu có bất kỳ 1 thẻ input nào kiểm tra sai, chặn quá trình submit bằng cách cho hàm return false. Ngược lại, return true để cho phép quá trình submit tiếp tục

Hic, mình trình bày tệ quá, hồi học sinh đã dở nhất môn văn rồi, thành ra cũng ko biết viết thế nào cho dễ hiểu cả. Nói tóm lại là muốn viết đc 1 cái thư viện cho ra hồn, bạn phải có hiểu biết khá sâu về mô hình DOM của javascript, còn ko thì chịu, ko thể giúp gì cho bạn đc

bài viết của a khá hay nhưng mỗi tội e hơi kém lên ko hiểu cho lăm a có thể cho e 1 cái đề mô đơn giản vidu là kiểm tra số hoạc email hoạc cái j đại loại vậy để còn có hướng phát triển ....

[Sounj]

Vậy thì chịu thôi. À, vẫn còn cách này có thể miễn cưỡng coi là thư viện kiểm tra dữ liệu

Bạn viết sẵn các hàm kiểm tra xem 1 chuỗi giá trị nhập có phải là số nguyên, số thực, email, min value, max value ,.v...v...
function LaSoNguyen(value) --> trả về true nếu chuỗi value là số nguyên, false nếu ngược lại
function LaSoThuc(value)
function LaEmail(value)
function LonHonHoacBang(value, minValue)
...v....v......
Bạn đưa mấy hàm bạn viết này vào 1 file javascript riêng. Sau này khi bạn có nhu cầu kiểm tra dữ liệu thì quá trình viết code của bạn sẽ đơn giản hơn bởi vì đã có những hàm kiểm tra viết sẵn này rồi => có thể yêu cầu của ông thầy bạn chỉ ở mức này thôi . OKie ?

[duonghy2]

ok mình đã viết dc rùi